Flexible box (flexbox)

Flexbox is one of the most useful CSS modules when it comes to arranging elements in a container. Flexbox allows elements to grow or shrink, depending on the available space in order to maintain the integrity of layouts.

Using Flexbox is the next step after using float-based layouts, not only because it can be easier to work with and wrap our heads around its concepts, but also because it may result in less markup and CSS.

Tip

A powerful partner to Flexbox is the Grid Layout, which is still in its early stages of development, and browser support is scarce. Since Grid Layout is out of the scope of this section, you can read more on Rachel Andrew's project site, Grid By Example, at http://gridbyexample.com/

Before we dive into ...

Get Web Developer's Reference Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.