A flex container is a parent element that arranges its child elements as flex items. Turn a block-level element—such as body, div, header, or main—into one with display: flex. The children then become flex items automatically, ready to be arranged along a main axis and a perpendicular cross axis. section 12.1 section 12.2
For a vertical flex container, set flex-direction: column. Think of it as a tidy stack: the main axis runs from top to bottom, so each item follows the previous one downward. This is handy when the page itself needs a header, main content, and footer stacked in order. section 12.2 section 12.11
body {
display: flex;
flex-direction: column;
justify-content: flex-start;
max-width: 50em;
min-height: 100vh;
}
This rule makes body a column flex container. Its children stack vertically, start at the top, and the container is at least as tall as the browser window. section 12.11
Build a vertical page stack in three small moves:
- Choose the parent that surrounds the parts you want to arrange; body can surround the whole page. section 12.1
- Set display: flex, then set flex-direction: column so the main axis runs vertically. section 12.11
- Let a middle item such as main use flex-grow: 1 when it should fill leftover vertical space. section 12.17
Keeping a footer at the bottom
A body column flex container can hold header, main, and footer in a vertical stack. Give body min-height: 100vh and main flex-grow: 1. When content is short, main expands into the empty space, leaving the footer at the bottom of the browser window instead of floating upward. section 12.17 section 12.11
A page can use flex containers inside other flex containers. For example, body may stack page regions vertically while main lays out an article and aside horizontally. In that arrangement, main is both a flex item in body and a flex container for its own children. section 12.17 section 12.16
Captions beneath thumbnails
Wrap a thumbnail and its caption in a flex container with flex-direction: column to place the caption below the image. A caption overlay can also be a column flex container; justify-content: flex-end places its text at the bottom of the overlay. section 15.47 section 15.51
Once the stack is working, use the axes as your map. justify-content controls placement along the main axis; for a column container, that means vertical placement. align-items controls the cross axis; for a column container, that means horizontal placement. A column body can use align-items: center to center a contained layout horizontally. section 12.2 section 15.33
