A flex container is the parent element that tells the browser, “Hey, arrange my children with Flexbox.” Pick a block-level element—such as a div, header, nav, main, or even body—and give it display: flex. Its direct child elements automatically become flex items. No item-registration ceremony required. section 12.1 section 12.2
header {
display: flex;
}
This one declaration turns a header into a flex container; its child elements then participate as flex items. section 12.2
Once the container is flexy, you control the group rather than wrestling each child separately. Start by choosing its direction with flex-direction. That choice establishes two routes: the main axis, where items run, and the cross axis, which runs across it. Row is the default, so items normally line up horizontally. section 12.2
Ask a flex container a few useful questions:
- Which way should items run: row, row-reverse, column, or column-reverse? section 12.2
- Where should items sit along the main axis? Use justify-content. section 12.2
- Where should items sit across the cross axis? Use align-items. section 12.2
- Should crowded items wrap onto additional lines, and how should those lines align? Use flex-wrap and align-content. section 12.2
PLAY: Put a heading dead center
Turn a div into a flex container, give it the browser window’s height, then center its one h1 child on both axes. The result is a heading planted squarely in the middle—no ancient CSS centering tricks required. section 12.3
Build layouts from small flex groups
A page can use several flex containers at once: body stacks page sections vertically, while header, navigation, and main arrange their own children horizontally. Nesting horizontal groups inside a vertical group can handle light-duty two-dimensional layouts, but CSS Grid is the better choice for most larger page layouts. section 12.6 section 12.1
Flex containers also earn their keep in a photo gallery: center footer content, let the main area fill spare page height, wrap thumbnails, or stack an image and caption vertically. For a caption overlay, a vertical container can push caption content to its bottom edge. section 15.7 section 15.8
