- At this point, Flexbox has helped me build…the Holy Grail Layout using only a couple of lines…of CSS, and that's pretty awesome on its own,…but what's really cool is we can now use Flexbox…to change the layout of our page…without changing the markup in the process.…So right now my content is ordered in the structural order…of my document, meaning we start out with the title,…then the menu section, then our main content,…our sidebar content, and our footer,…but it doesn't have to be like that.…Using Flexbox, we can reverse the order of content…within a flexbox, or we can change the order…of a specific item within a flexbox,…and that's what we're going to look at right now.…
So, first, I'm going to show you the most dramatic thing,…which is also a bit ridiculous to do.…If I go back to holy-grail.css, you'll remember here…under outer-wrap we set the flex-direction to column…so that it displays in a column,…but column is just one of the property options.…We can also set it to column-reverse.…Now, just like the name suggests, what this will do…
Author
Released
7/30/2015This course shows how to use flexible boxes to create advanced responsive layouts. Morten Rand-Hendriksen takes the viewer on a tour of Flexbox and provides actionable code snippets that can be implemented safely in almost any website. He puts it all together in a holy grail site complete with card-based layout, mixed content menus, and interactive components that provide visitors with choices about what they see.
- Creating Flexbox-powered menus
- Building a responsive card layout
- Marking up and styling the holy grail layout
- Changing displays
- Showing and hiding the sidebar
- Animating content
Skill Level Intermediate
Duration
Views
Related Courses
-
Introduction
-
Welcome1m 22s
-
-
1. What Is Flexbox?
-
What is Flexbox?2m 8s
-
-
2. Flexbox-Powered Menus
-
Creating a social media menu3m 17s
-
3. Responsive Card Layouts
-
Challenges with card layouts3m 48s
-
Marking up typical cards2m 14s
-
-
4. Holy Grail Layout
-
5. Handing Control to the User
-
Handing control to the user2m 33s
-
Sidebar position switching4m 23s
-
Animating content6m 2s
-
-
6. Putting It All Together
-
Putting it all together8m 17s
-
-
Next steps
-
Thank you1m 45s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Changing the layout with Flexbox