Stretch makes flex items fill available space along the cross axis. It is the default value for align-items, so items often become the same height or width without extra rules. section 12.2 section 12.17
Think of the cross axis as the direction across the main flow:
- Use align-items: stretch to expand each flex item through the available cross-axis space. section 12.2
- Because stretch is the default, declaring it is usually optional. section 12.2
- Compare it with center, flex-start, flex-end, or baseline when items should keep their natural size or move within the cross axis. section 12.2
A naturally even sidebar
In a horizontal article-and-sidebar layout, the body flex container's default stretch value makes both items the same height. The sidebar can therefore reach the full height without a faux column. section 12.17
container {
display: flex;
align-items: stretch|flex-start|flex-end|center|baseline;
}
Try align-items: stretch alongside the other cross-axis values to see how flex items occupy the container. section 12.2
