From the course: Advanced Responsive Layouts with CSS Flexbox

What is Flexbox? - CSS Tutorial

From the course: Advanced Responsive Layouts with CSS Flexbox

Start my 1-month free trial

What is Flexbox?

- If this is the first time you've encountered Flexbox here's quick primer on what this is all about. Flexbox, also known as Flexible Box, or the CSS Flexible Boxes Layout specification is a new type of display mode for boxes within CSS that allows to do new things that were previously not possible. The basic premise of a flexbox is if you have a container and you set its display property to flex it will flex the size of all the containers within it. That means you can create things like equal height columns and you can create layouts where the individual boxes within a flexbox will scale or contract individually in the same way so that you can create much more advanced layouts. If you need a primer on Flexbox I urge you to go check out James Williamson's course CSS Flexbox First Look, right here in the lynda.com library. James does a great job of explaining what Flexbox is, why it's exciting, and how to use it right now. Now in this course we'll be working with several different types of advanced layouts using Flexbox. And the end result of everything we'll be working with is what you see right here on the screen. Here we have flexboxes within flexboxes within flexboxes. And the result is a very advanced layout using pretty much only CSS Here we have an advanced menu with drop downs as displayed in a mixed menu setting with two menus next to one another. This will wrap and fold and work properly on all screen sizes. Below we have a card based layout where each of the rows have equal height columns. And finally the entire page is displayed using the Holy Grail layout. In addition I've added some extra interactive features like the ability to quickly switch the position of the sidebar, position the sidebar either below or above the content, and even collapse the sidebar when necessary. All of these things I'm showing you used to be quite complex to do in CSS and often required JavaScript. But thanks to Flexbox all these things are fully possible within your browser using only CSS and some very trivial JavaScript just to add or remove some clauses. So now that you know what we're going to be working towards it's time to get cracking.

Contents