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 O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.