A flex item is a child element inside a flex container. Think of the container as a tray and its children as the things on the tray: flexbox can line them up, size them, space them, and move their order. Turn a parent into a flex container with display: flex, and its child elements become flex items automatically—no special item markup required. section 12.2 section 12.1
Once an element is a flex item, you can ask a few useful questions:
- Should it use extra room? Set flex-grow. A value of 0 is the default; positive values share empty space, with larger values receiving larger proportions. section 12.6
- Should it shrink when room runs short, start at a suggested size, or use a shorthand? Use flex-shrink, flex-basis, or flex. section 12.6
- Should it appear in a different position or align differently from its neighbors? Use order or align-self. section 12.6
Make a two-column content area
Put an article and an aside inside main, then make main a flex container. The article and aside become flex items. Giving them flex-grow values of 3 and 1 divides available horizontal space into a 75% article area and a 25% sidebar. Their equal height comes from the container’s default stretch alignment. section 12.17
Let the main content push down a footer
A flex item can also be a flex container. In a page layout, main is an item inside body while article and aside are items inside main. With body arranged vertically, min-height: 100vh, and flex-grow: 1 on main, main takes spare vertical space and leaves the footer at the window bottom. section 12.17
<main>
<article>
<h2>Article Title</h2>
<p>Article paragraph 1</p>
<p>Article paragraph 2</p>
</article>
<aside>
<h3>Sidebar Title</h3>
<p>Sidebar paragraph</p>
</aside>
</main>
This markup gives main two child elements—article and aside—ready to become flex items when main is configured as a flex container. section 12.17
Flex items are especially handy for page components such as navigation, headers, sidebars, and footers. For example, a footer can hold a left-aligned copyright notice and right-aligned site links as two flex items. Flexbox adapts as content or screen space changes, though large, complex layouts may call for CSS Grid Layout instead. section 20.46 section 12.1
