Flexbox lays out the children of an element in a row or column. Set `display: flex` on the parent to make it a flex container; its children become flex items. It is useful for one-dimensional arrangements, equal-height columns, and alignment that would be awkward in normal document flow. section 4.0 section 4.5
Build the layout in stages:
- Choose the container and set `display: flex`. Items flow in a row by default; `flex-direction: column` stacks them vertically. Changing direction also rotates the main axis and its perpendicular cross axis. section 4.3 section 4.4
- Add `gap` for spacing and flex values on items when their sizes need to change. The `flex` shorthand specifies `flex-grow`, `flex-shrink`, and `flex-basis`. section 4.4 section 4.5
- Use alignment properties after the basic arrangement works. `justify-content` and `align-items` align the group; `align-self` can adjust an individual item. section 4.4 section 4.4.3
Make unequal content produce aligned columns
Suppose a large tile sits beside a column of two smaller tiles. If the large tile gains content, the outer flex items can remain equal height while the smaller tiles fail to fill their column. Make that right column both an outer flex item and an inner flex container: set `display: flex` and `flex-direction: column` on it, then `flex: 1` on each tile. The tiles grow to fill the height supplied by the outer layout. A standalone column flex container does not gain extra height merely because its children have `flex-grow`; its height normally follows its contents. section 4.3 section 4.3.1
Listing 4.9 Creating a flex column on the right
.column-sidebar { #1
flex: 1; #1
display: flex; #1
flex-direction: column; #1
gap: var(--gap-size); #1
}
.column-sidebar > .tile {
flex: 1; #2
}
The CSS listing shows the nested column and the flex values that let its two tiles fill the available height. section 4.3.1
Choose flexbox when content should help determine the widths of items in a row, such as navigation links. Choose grid when items must align across both rows and columns: wrapped flex rows do not align their items with one another. Keep normal document flow where it already does the job. section 5.2.2 section 4.4.3
