Content updated
By the end, you can…
- Use align-self for one item's cross-axis position and an auto margin to absorb main-axis space before a group.
- Create a toolbar with two items together and a final action separated by available space, then compare this with a cross-axis override.
Build on the CSS introduction
You already know how to center a group with justify-content and align-items. A toolbar often needs something more specific: most controls share one alignment, one control sits lower, or a final action moves away from the others. Decide whether you are changing the whole group, one item's cross-axis position, or the space before an item.
align-self overrides the container's align-items for one item. The remaining siblings keep the container’s shared alignment. baseline instead aligns the text baselines of differently sized labels; their top edges need not line up. Compare the large B label with A and C rather than judging the colored boxes alone.
On the main axis, an auto margin can absorb available positive space. In this left-to-right row, margin-inline-start: auto on C pushes C away while A and B remain together. If no spare space remains, there is nothing for that margin to absorb. This is different from space-between, which distributes space between every pair in the group.
What to remember first
Use align-self for one item's cross-axis position and an auto margin to absorb main-axis space before a group.
Tools for this experiment
align-self: flex-endOverride one cross-axis position- In this row it moves C downward without changing A or B.
align-items: baselineLine up text- The larger label's baseline aligns with the smaller labels; equal top edges are not the goal.
margin-inline-start: autoSeparate the final action- In this left-to-right row, the margin takes spare width before C. The property is logical rather than a hardcoded left margin.
.item:last-childSelect the last sibling- The pseudo-class targets C without changing the HTML order.
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 {
display: flex;
height: 200px;
gap: 12px;
align-items: flex-start;
}
.item {
padding: 8px;
}
.item:nth-child(2) {
font-size: 28px;
}All three boxes begin at cross-start, even though B has larger text.
See it happen: try a small change
Watch C for the individual override and margin. Watch the bottoms of the letters when comparing baselines.
Code to notice
.layout {
display: flex;
height: 200px;
gap: 12px;
align-items: flex-start;
}
.item {
padding: 8px;
}
.item:nth-child(2) {
font-size: 28px;
}Live result
What changed: All three boxes begin at cross-start, even though B has larger text.
A common wrong turn
Do not use justify-self to move one flex item along the main axis; it does not provide that behavior in Flexbox. Also distinguish baseline alignment from bottom-edge alignment. Test with unequal text sizes so the difference is visible.
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: align individual items and separate groups
Create a toolbar with two items together and a final action separated by available space, then compare this with a cross-axis override.
Optional exploration
Use the playground to explore the controls and generated code. It is an open experiment, so it does not check your answer.
- Start from the first preview's CSS and use the same three items, including the larger middle label.
- Add an auto inline-start margin to the last item. Narrow the container and observe the margin shrink as free space disappears.
- Remove that margin and apply align-self: flex-end instead. Explain why this moves the last item along a different axis; compare baseline alignment too.
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.