Join Morten Rand-Hendriksen for an in-depth discussion in this video Changing the layout with Flexbox, part of Advanced Responsive Layouts with CSS Flexbox.
- View Offline
- 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…
This 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