4 Flexbox
This chapter covers
- Laying out elements of a page using flexbox
- Flex containers and flex items
- Main axis and cross axis
- Element sizing in flexbox
- Element alignment in flexbox
In chapter 3, we looked at normal document flow—the way the browser lays out elements on the page by default. In the next few chapters, we’ll explore the other forms of layout available to you, particularly flexbox, grid, and positioning. With these tools, you will have far more options available; you will be able to structure pages in almost any way imaginable.
Flexbox—formally Flexible Box Layout—is a method for laying out elements on the page. It’s primarily used for arranging elements in a row or column. It also provides a simple solution to the historically troublesome problems of vertical centering and equal-height columns.
If flexbox has one weakness, it’s the overwhelming number of options it provides. It introduces more than a dozen new properties to CSS, including some shorthand properties. These 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 ease into the topic by covering the most essential of these properties first.