justify-content
Distributes items along the main axis.
Platform under construction
Flex Alignment
Flex alignment is where flexbox becomes useful for real UI. justify-content, align-items and gap decide how items sit in the available space.
.nav { display: flex; align-items: center; gap: 1rem; }
.nav__cta { margin-inline-start: auto; }
Layout
Flex alignment is axis control.
Flex alignment depends on the current flex-direction. In a row, justify-content works horizontally and align-items works vertically. In a column, those roles visually swap.
Alignment should solve a layout relationship: centered controls, separated navigation, equal-height items or compact button groups.
Good flex alignment removes the need for fragile margin nudges and vertical-align tricks.
align-items
Aligns items across the cross axis.
gap
Creates consistent space between flex items.
auto margin
Can push one item away from the rest inside a flex row.
Visual model
Layout is easier when you can name the relationship.
Good layout CSS is not a pile of positions. It is a set of relationships: flow, axis, tracks, placement, layering, sticking and rhythm.
justify-content
Controls distribution along the main axis.
align-items
Controls alignment across the cross axis.
gap
Controls distance between items.
margin-inline-start: auto
Uses remaining space to separate one item.
Examples
Use the layout tool that matches the shape of the problem.
Aligned navigation row
.nav {
display: flex;
align-items: center;
gap: 1rem;
}
.nav__cta { margin-inline-start: auto; }
Alignment with magic pixels
.nav a { margin-top: 7px; }
.nav .cta { margin-left: 243px; }
.nav { height: 63px; }
Rules that matter
Strong layout CSS stays readable when the screen changes.
Layout work is where real content, real devices and real users expose weak assumptions. The goal is a structure that explains itself in code and survives change.
Know the axis first
Alignment properties make sense only after you know flex-direction.
Use gap for spacing
gap belongs to the container and stays clean when items wrap.
Use auto margins deliberately
Auto margins can push one group to the far side.
Avoid fixed heights for centering
align-items center is usually better than height hacks.
Watch wrapping rows
Wrapped flex lines introduce align-content decisions.
Do not reorder important content casually
Alignment and order are different ideas.
Production thinking
Layout quality shows up when content stops being perfect.
Why does this matter?
Alignment makes interfaces feel deliberate. A few clean flex rules can remove many brittle spacing fixes.
Accessibility
Do not use visual order to contradict reading order. Keyboard users should meet content in a logical sequence.
Production note
Create reusable alignment patterns for nav bars, cards, media objects and action rows.
SEO note
Clean alignment supports usability, especially for calls to action and navigation that search visitors rely on.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Remove margin-inline-start: auto and notice where the CTA moves.
- Change align-items to stretch and describe the effect.
- Set flex-direction: column and rethink justify-content.
Practice assignment
Do this before moving to the next lesson.
- Create a flex navigation with one CTA pushed to the end.
- Use gap for all spacing between links.
- Explain which property controls the main axis.
Try it yourself
Align a navigation bar
Self-check
Before you continue, prove that you understand Flex Alignment.
Answer these questions before moving on. If the answer is vague, change the lab layout and inspect the result.
- Can you explain justify-content and align-items by axis?
- Can you use auto margin to push one flex item?
- Can you center items without fixed height hacks?
- Can you keep source order logical?
- Can you use gap instead of child margins?
Senior audit upgrade
Practice alignment in row and column.
A strong flexbox exercise is to build the same navigation twice: once as a row, once as a column, and explain which axis changed.
Row nav
Use gap, align-items and an auto margin to place items in a horizontal bar.
Column nav
Switch direction and explain how justify-content and align-items feel different.
No nudges
Avoid magic margins when the alignment property can express the relationship.