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 major browsers, including partial support in IE10. In fact, it has broader support than even the border-radius property (which isn’t supported in Opera Mini). If you’ve been waiting for the right time to learn flexbox, that time has arrived. This chapter will get you acquainted.

If flexbox has one weakness, it’s the overwhelming number of options it provides. It introduces 12 new properties to CSS, including some shorthand properties. That can be a lot to take in at once. When I first started learning flexbox, it felt a bit like drinking from a fire hose, and I had a hard time committing all the new properties to memory. I’m going to take a different approach in teaching you about flexbox—we’ll ease into it.

5.1. Flexbox principles

5.2. Flex item sizes

5.3. Flex direction

5.4. Alignment, spacing, and other details

5.5. A couple of things to be aware of

Summary

sitemap