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 ...

Get CSS in Depth 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.