CSS in Depth

Chapter 5. Flexbox

This chapter covers

• Flex containers and flex items
• Main axis and cross axis
• Element sizes in flexbox
• Element alignment in flexbox

If you’ve been in the CSS world in the past few years, you’ve almost certainly heard someone sing the praises of flexbox. Flexbox—formally Flexible Box Layout—is a new method for laying out elements on the page. It’s more predictable and offers far more specific control than floats. It’s also a simple solution to the long-standing problems of vertical centering and equal height columns.

Flexbox has been on the horizon for several years, and developers who only need to support cutting-edge browsers have been using it for a little while. But now we’ve reached a point where it’s supported in all ...