Join Morten Rand-Hendriksen for an in-depth discussion in this video What is Flexbox?, part of Advanced Responsive Layouts with CSS 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 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