From the course: Advanced Responsive Layouts with CSS Flexbox

Unlock the full course today

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

Styling the holy grail layout with Flexbox

Styling the holy grail layout with Flexbox - CSS Tutorial

From the course: Advanced Responsive Layouts with CSS Flexbox

Start my 1-month free trial

Styling the holy grail layout with Flexbox

- Before writing out my different CSS rules, I need to do a little bit of planning here. You'll remember that in the markup I have a container that wraps around all my content and I can, if I want to, use that container as a Flexbox. That way I can reorder the content on my page, maybe move the menu up above the site title, if I want to on certain screens, or maybe move the menu and the site title below the main content, or do a bunch of other things without changing the markup itself. Basically, by wrapping everything in a Flexbox, I harness the power of Flexbox and its ability to reorganize my content but I don't have to use it if I don't want to. The next thing I want to do is make sure that my main content here and the sidebar content actually appears as content on the left and the right hand side. This is where Flex box is going to help me the most. So I have to make a container that holds both of these areas into a Flexbox. Then later on in the course, I'm also going to use Flex…

Contents