CSS Flexbox is a powerful CSS layout module designed to align and distribute items along a single dimension — a row or a column — with almost no effort. Unlike the old float and inline-block tricks, Flexbox lays elements out along an axis, shares leftover space sensibly, and solves vertical centering in a single line. In this tutorial you will learn the core Flexbox properties with correct syntax, real examples, and the layout patterns you reach for every day.
The flex container and the axis concept
Everything starts by giving an element display: flex. That element becomes a flex container, and its direct children become flex items. To truly understand Flexbox you must grasp its two axes:
- Main axis: defined by
flex-direction. With the defaultrowit runs left to right. - Cross axis: perpendicular to the main axis. In a
rowlayout it runs top to bottom.
This distinction is critical: justify-content always works along the main axis, while align-items always works along the cross axis. When you change flex-direction, the direction of both properties swaps with it.
.container {
display: flex;
flex-direction: row; /* row | row-reverse | column | column-reverse */
}Distributing on the main axis: justify-content
justify-content distributes items along the main axis and manages the space between them. The most common values are:
flex-start— packs items at the start (default).center— centers the items.flex-end— packs items at the end.space-between— first and last item hug the edges, remaining space is split evenly between.space-around— equal space on both sides of each item.space-evenly— all gaps (including the edges) are equal.
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}Aligning on the cross axis: align-items and align-self
align-items aligns every item along the cross axis. stretch (the default) fills items to the container's height, while center centers them vertically — the cleanest fix for the "vertical centering" problem that troubled developers for years.
stretch— stretches items across the cross axis (default).flex-start/flex-end— aligns to the start or the end.center— centers on the cross axis.baseline— aligns the text baselines.
To align a single item differently from the rest, apply align-self to that item; it overrides align-items for that item only.
.card {
align-self: flex-end; /* only this item aligns to the end */
}Wrapping and spacing: flex-wrap and gap
By default flex items stay on a single line and shrink if they do not fit. flex-wrap: wrap lets items flow onto a new line — the foundation of responsive card grids. To put space between items you no longer need margin hacks; the modern solution is the gap property.
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem; /* spacing between both rows and columns */
}gap only adds space between items, never on the outer edges, which makes it far more predictable than the old margin-based approaches.
Flexibility: flex-grow, flex-shrink, flex-basis and the flex shorthand
The real power of Flexbox shows in how it shares leftover space among items. Three properties control this:
flex-grow— how much an item grows to fill leftover space (default0).flex-shrink— how much an item shrinks when space is tight (default1).flex-basis— the starting size before growing or shrinking (defaultauto).
To write all three on one line, use the flex shorthand. The most common patterns are:
.item {
flex: 1; /* flex: 1 1 0 — all items share equal width */
}
.fixed-sidebar {
flex: 0 0 240px; /* will not grow or shrink: a fixed 240px column */
}
.flexible-content {
flex: 1 1 300px; /* start at 300px, grow if there is room, shrink if needed */
}When flex: 1 is given to every child, they all share the remaining space equally — the shortest path to equal-width columns.
Ordering: order
The order property lets you reorder items visually without changing their order in the HTML. The default value is 0; lower values move toward the front, higher values toward the end.
.featured {
order: -1; /* jumps to the very front, wherever it sits in the HTML */
}Accessibility note: order changes only the visuals — keyboard and screen-reader order still follow the HTML source. So avoid overusing it in ways that break the logical reading order.
A practical pattern: perfect centering on screen
Centering an element both horizontally and vertically is a single block with Flexbox:
.center {
display: flex;
justify-content: center; /* main axis: horizontal */
align-items: center; /* cross axis: vertical */
min-height: 100vh;
}For a card grid, combining flex-wrap with flex-basis lets the column count grow naturally as the screen widens — a responsive grid without writing a single media query.
Frequently Asked Questions
Should I use Flexbox or Grid?
The rule of thumb: use Flexbox for one-dimensional layouts (a single row or column, navbars, button groups, card rows) and CSS Grid for two-dimensional layouts (aligning rows and columns together, page templates). They are not rivals but complements; most pages nest them together.
How do I tell justify-content and align-items apart?
justify-content always works along the main axis (horizontal by default), while align-items always works along the cross axis (vertical by default). Set flex-direction: column and these directions swap, because the main axis is now vertical.
How should I add space between items?
In modern browsers the cleanest method is the gap property. Instead of margin hacks, give the container gap: 1rem; it spaces items apart only and keeps the outer edges clean.
Want to solve layout problems for good? Let's build a fast, responsive interface that combines Flexbox and Grid the right way. Get in touch with me and let's talk about your project.