A flex item is an element inside a flex container. Think of the container as a small organizer tray: once it uses display: flex, its child elements become the pieces the tray can line up, space out, stretch, or rearrange. No special “make me an item” declaration is needed—the children get the job automatically. section 12.1 section 12.2
<div class="container">
<div class="item itemA">A</div>
<div class="item itemB">B</div>
<div class="item itemC">C</div>
<div class="item itemD">D</div>
<div class="item itemE">E</div>
<div class="item itemF">F</div>
</div>
Here, the six inner div elements are the potential flex items. The outer element becomes their flex container when CSS applies display: flex to it. section 12.1 section 12.2
Flex items follow two directions set by their container: the main axis, which runs with the items, and the cross axis, which runs across them. A row makes the main axis horizontal; a column makes it vertical. Container properties such as justify-content arrange items on the main axis, while align-items handles the cross axis. Flexbox gets to choose the direction instead of making everything march in one line forever. Nice. section 12.2
Once an element is a flex item, these properties answer the useful sizing-and-position questions:
- Use flex-grow to give an item a share of extra space. A value of 0 is the default; equal positive values split available space evenly, while different values split it proportionally. section 12.4
- Use flex-shrink when items need to give up space, and flex-basis to suggest an initial size. The flex shorthand can combine grow, shrink, and basis. section 12.4
- Use order to change an item’s placement order, or align-self to override the container’s align-items setting for one item. section 12.4
Center one flex item
To dead-center an h1, make its surrounding div a flex container. The h1 becomes a flex item automatically. With the container at the full browser-window height, justify-content: center centers it along one axis and align-items: center centers it along the other. div { display: flex; justify-content: center; align-items: center; height: 100vh; } <div><h1>Center Me!</h1></div> section 12.3
Items can also become containers
One element can wear both hats. In a page layout, main is a flex item inside body, but it is also a flex container for article and aside. Giving article flex-grow: 3 and aside flex-grow: 1 divides the available horizontal space into 75% and 25%. Meanwhile, flex-grow: 1 lets main take the empty vertical space in body. section 12.6
That parent-child relationship is the whole trick: choose a container, turn it into a flex container, then style its direct children as flex items. Use Flexbox for one-dimensional pieces such as headers, sidebars, navigation, and smaller layouts; larger complex layouts belong to CSS Grid Layout. section 12.1 section 12.6
