Content updated
By the end, you can…
- Count outer item sizes, gaps, and padding before predicting a wrap; align-content distributes the resulting lines.
- Predict and verify the exact width at which three fixed-basis cards stop fitting on one line.
Build on the CSS introduction
The CSS introduction shows that wrapping permits another line. Here you will predict exactly when that happens. Three 100px items need 300px plus two 16px gaps: 332px of inner width. Add 16px padding on each side and the container needs 364px. At 363px, the third item must move to another line in this deliberately non-shrinking example.
The preview viewport has its own 16px padding on each side. A 396px preview therefore contains a 364px layout, while a 395px preview contains a 363px layout. Keeping those boxes distinct prevents an apparent off-by-one result. The shown layout has an outline, which does not consume width like a border would.
Once wrapping creates two lines, align-content determines how the lines use spare cross-axis space. align-items positions items inside their own line. Changing align-content to space-between moves the lines toward the top and bottom of the fixed-height container. gap remains a minimum separation; it is not necessarily the final distance when extra space is distributed.
What to remember first
Count outer item sizes, gaps, and padding before predicting a wrap; align-content distributes the resulting lines.
Tools for this experiment
flex: 0 0 100pxKeep the test size fixed- No growth or shrinking is allowed. This makes the wrapping threshold easy to calculate.
box-sizing: border-boxInclude padding in the declared width- Subtract the two 16px padding edges to find the space available to the items.
align-contentPosition flex lines- It needs a wrapping container with spare cross-axis space to visibly distribute that space.
align-itemsPosition items within a line- This is a separate level from distributing the lines themselves.
Walk through an example
Use this HTML inside the body of a document and place the CSS in your linked stylesheet. The preview adds a dashed outline and card colors to make boundaries visible; those decorations do not control the layout. Its body has 16px padding on each side. Fixed preview widths are intentional: on a small screen, scroll inside the preview to inspect the whole experiment.
<div class="layout">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>.layout {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 240px;
padding: 16px;
gap: 16px;
align-items: flex-start;
align-content: flex-start;
}
.item {
box-sizing: border-box;
flex: 0 0 100px;
height: 40px;
padding: 8px;
}396 − 32 = 364px container width. Its inner 332px fits three 100px cards and two 16px gaps exactly.
See it happen: try a small change
The preview body uses 16px padding on each side. Compare a 364px container with a 363px container, then change only the line alignment.
Code to notice
.layout {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 240px;
padding: 16px;
gap: 16px;
align-items: flex-start;
align-content: flex-start;
}
.item {
box-sizing: border-box;
flex: 0 0 100px;
height: 40px;
padding: 8px;
}Live result
What changed: 396 − 32 = 364px container width. Its inner 332px fits three 100px cards and two 16px gaps exactly.
A common wrong turn
Three neighboring cards have two internal gaps, not three. Do not count the preview body's padding twice or forget your own container padding. In a different exercise, item borders, minimum sizes, and growth can change the visible result; this example fixes those variables deliberately.
Try it in your own project
Copy the example into your local HTML and CSS files. Predict one change before saving and refreshing the browser. Use the interactive versions above to check your prediction, then explain which container, item, or track changed. The related playground offers extra practice with its supported controls; use your local files for properties it does not expose.
Your turn: predict line breaks and align whole lines
Predict and verify the exact width at which three fixed-basis cards stop fitting on one line.
Optional exploration
Use the playground to explore the controls and generated code. It is an open experiment, so it does not check your answer.
- Calculate 3 × 100 + 2 × 16 + 2 × 16 before running the preview. Explain each term.
- Compare the 396px and 395px preview choices, remembering the preview body's 32px total padding. In a local file set the container itself to 364px, then 363px.
- At the narrower size, compare flex-start and space-between for align-content. Keep align-items unchanged and explain which gaps become larger.
Go to the source
Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.