Flexbox
Normal flow stacks block boxes one under the next. display: flex lines them up in a row instead and lets you place them. Switch on one line of a .row rule at a time and watch three boxes move to exactly where a browser puts them: side by side, spaced with gap, spread with justify-content, centred with align-items, stretched with flex-grow, squeezed on a 300px screen, and finally wrapped onto a second line.
5 quick questions
Pick an answer to see why. Your score saves with your progress.
01You add display: flex; to .row. What happens to its three child divs?
display: flex makes .row a flex container. Its children become flex items and are laid out along the main axis, a row by default, packed at the start.
02A 600px row holds items 100px, 140px and 100px wide with gap: 16px;. How much free space is left?
Two gaps sit between three items: 600 − (100 + 140 + 100) − 2 × 16 = 228px. gap never adds space at the outer edges.
03Which property places the items along the cross axis (top to bottom in a row)?
align-items works on the cross axis. justify-content shares free space along the main axis.
04With 228px of free space, only .b has flex-grow: 1 (the others keep the default 0). How wide does .b (140px) become?
flex-grow shares the free space between items in proportion to their flex-grow. .b is the only one above 0, so it takes all 228px: 140 + 228 = 368px.
05The row shrinks to 300px but the items and gaps need 372px. Which declaration lets an item move to a new line instead of shrinking?
flex-wrap is nowrap by default, so items shrink to fit one line. flex-wrap: wrap lets items that do not fit start a new flex line.
Glossary
- Flex container
- A box with display: flex. It lays out its children with the flex layout rules.
- Flex item
- A child of a flex container. Flex items line up along the main axis.
- Main axis
- The direction flex items are laid out in. With flex-direction: row (the default) it runs left to right.
- Cross axis
- The direction across the main axis. In a row it runs top to bottom.
- Free space
- What is left of the container's main size after the items' sizes and the gaps. justify-content and flex-grow share it out.
- gap
- Space between neighbouring items (and between lines), never at the outer edges.
- flex-grow / flex-shrink
- How much of the free space an item takes (default 0), and how much it gives up when space runs short (default 1).
- Flex line
- One row of items. With flex-wrap: wrap a container can have several flex lines.
Notes and sources
- The card leaves out the boxes' sizes. The full style.css also has .a { width: 100px; height: 40px; } .b { width: 140px; height: 70px; } .c { width: 100px; height: 30px; }
- Before align-items is set, its default (normal, which acts as stretch) makes items as tall as the row only when their height is auto. These boxes have a set height, so they stay at the top.
- Flex items do not shrink below their smallest content size by default (min-width: auto). Each box here holds one letter, so they can shrink to about 79px; numbers are rounded to whole pixels in the text.
- After wrapping, the row has two flex lines. align-content (default normal, which acts as stretch) shares the 44px of height left over between them, so line one is 92px tall and line two 52px; gap also puts 16px between the lines.
- flex-direction: column would turn the main axis to run top to bottom; justify-content and align-items then swap directions with it. In right-to-left languages a row runs right to left.
- Save the full page as index.html and the rules as style.css in one folder and open index.html in a browser to see the same layout; give the boxes a background colour to see them.
Quiz Unlocks after the last step.