From the course: Advanced Responsive Layouts with CSS Flexbox

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Changing the layout with Flexbox

Changing the layout with Flexbox - CSS Tutorial

From the course: Advanced Responsive Layouts with CSS Flexbox

Start my 1-month free trial

Changing the layout with Flexbox

- 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…

Contents