Alignment bugs are often vocabulary bugs. align-items, justify-items, align-content, and justify-content sound similar, but they answer different questions.
Start with two distinctions:
- Are you aligning items inside their own area?
- Are you distributing leftover space between tracks or lines?
Once that is clear, most alignment rules become predictable.
Items vs content
align-items and justify-items align the item inside its grid area or flex line. align-content and justify-content distribute the tracks or flex lines inside the container when extra space exists.
.cluster {
display: flex;
align-items: center;
justify-content: space-between;
}This centers items on the cross axis and distributes remaining inline space between them. Those are two separate jobs.
Grid makes both axes explicit
Grid gives you two-dimensional alignment controls.
.gallery {
display: grid;
min-block-size: 40rem;
grid-template-columns: repeat(3, 12rem);
justify-content: center;
align-content: start;
justify-items: stretch;
align-items: start;
}justify-content centers the whole grid inside the container. align-content packs the rows at the block start. justify-items and align-items affect the items inside their grid cells. If there is no extra space, content distribution may appear to do nothing. If the item is already stretching, item alignment may be hidden.
Flexbox has a main axis
In Flexbox, justify-content follows the main axis. If flex-direction changes, the axis changes too.
.toolbar {
display: flex;
gap: 0.75rem;
align-items: center;
}
.toolbar__secondary {
margin-inline-start: auto;
}This is often clearer than justify-content: space-between because one item takes responsibility for absorbing the extra space. The rest of the toolbar remains a natural cluster.
For a wrapping Flexbox layout, remember that align-content distributes flex lines, not individual items. It only becomes visible when the container has multiple lines and extra cross-axis space.
Logical alignment terms
Use start and end when the alignment follows the writing mode. Use physical values only when the design really means a physical side.
.callout {
display: grid;
justify-items: start;
align-content: start;
}This connects directly to logical properties. A layout that uses margin-inline, border-inline-start, and logical alignment is easier to adapt than one that hard-codes left and right everywhere.
The production approach
Write the alignment rule that matches the job, then leave a clear sizing context. Alignment cannot distribute space that does not exist. If a container has no extra block size, align-content will not create a visible change. If a grid item stretches by default, justify-items may be hidden by the item filling its cell.
When debugging alignment, temporarily outline the container and direct children. Seeing which box owns the empty space usually reveals the property you actually need.
Keep source order aligned with reading order, especially for forms, navigation, and step-based interfaces. Alignment should not be used to disguise markup that is already in the wrong order.
Common production mistakes
The most common mistake is using justify-content: space-between as a layout system. It works for a simple toolbar, but it becomes fragile when items wrap, disappear, or grow. If one cluster belongs on the opposite side, auto margin on that cluster usually communicates the intent better. If several regions need stable columns, Grid is probably the clearer primitive.
Another mistake is trying to center content without giving the parent a meaningful size. place-items: center cannot visibly center a child in the block axis if the parent is only as tall as the child. Give the parent a min-block-size when the design depends on vertical centering, and use viewport units carefully so mobile browser chrome does not create awkward jumps.
Finally, avoid alignment that changes the reading order. A row-reversed flex layout may look right visually while keyboard focus and screen-reader order remain different. That mismatch is especially costly in forms, navigation, and ordered steps. Use alignment to place boxes within a sound source order, not to repair markup that was arranged for the wrong reason.
Alignment also interacts with overflow. Centering an item that is wider than its container can hide the start and end of the content equally, which is rarely helpful. Before changing alignment, confirm the item can fit or has a local overflow strategy. A button row that wraps cleanly needs different alignment than a code block that should scroll.
When in doubt, remove the alignment rule briefly and see which natural flow the browser chooses.
Related guides: Grid vs Flexbox, Subgrid, and Logical properties.