CSS Flexbox
Flex Container
The flex container is the parent element you turn on with display:flex. All of the layout power of flexbox at the container level comes from a handful of properties that control direction, alignment, wrapping and spacing. This page walks through each one with runnable examples.
Creating a Flex Container
Any element becomes a flex container the moment you give it display:flex (or display:inline-flex for an inline-level container). Its direct children instantly become flex items and start following the flexbox rules.
.container { display: flex; } /* block-level */
.badge { display: inline-flex; } /* flows inline with text */Container Properties at a Glance
| Property | Controls | Common values |
|---|---|---|
| flex-direction | Direction of the main axis | row, row-reverse, column, column-reverse |
| justify-content | Spacing along the main axis | flex-start, center, space-between, space-around, space-evenly |
| align-items | Alignment along the cross axis | stretch, flex-start, center, flex-end, baseline |
| flex-wrap | Whether items wrap onto new lines | nowrap, wrap, wrap-reverse |
| align-content | Spacing of wrapped lines (cross axis) | flex-start, center, space-between, stretch |
| gap | Space between items | any length, e.g. 16px or 1rem |
flex-direction
flex-direction sets which way the main axis points. row is the default (left to right in English). column stacks items top to bottom. The -reverse variants flip the order.
justify-content
justify-content distributes free space along the main axis. The example below shows the same three items under five different values so you can see the spacing change.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; }
.row {
display: flex;
background: #f1f5f9;
margin-bottom: 10px;
padding: 8px;
gap: 8px;
}
.start { justify-content: flex-start; }
.center { justify-content: center; }
.between { justify-content: space-between; }
.around { justify-content: space-around; }
.evenly { justify-content: space-evenly; }
.box {
background: #6366f1; color: #fff; padding: 14px 18px;
border-radius: 6px; font-weight: 700;
}
label { font-size: 13px; color: #334155; }
</style>
</head>
<body>
<label>flex-start</label>
<div class="row start"><span class="box">A</span><span class="box">B</span><span class="box">C</span></div>
<label>center</label>
<div class="row center"><span class="box">A</span><span class="box">B</span><span class="box">C</span></div>
<label>space-between</label>
<div class="row between"><span class="box">A</span><span class="box">B</span><span class="box">C</span></div>
<label>space-around</label>
<div class="row around"><span class="box">A</span><span class="box">B</span><span class="box">C</span></div>
<label>space-evenly</label>
<div class="row evenly"><span class="box">A</span><span class="box">B</span><span class="box">C</span></div>
</body>
</html>align-items and Perfect Centring
align-items positions items along the cross axis. Combine justify-content:center with align-items:center and you get the famous flexbox centring trick — an element centred both horizontally and vertically with two lines of CSS.
<!DOCTYPE html>
<html>
<head>
<style>
.stage {
display: flex;
justify-content: center; /* main axis */
align-items: center; /* cross axis */
height: 220px;
background: #0f172a;
border-radius: 8px;
}
.card {
background: #f59e0b;
color: #1e293b;
padding: 28px 40px;
border-radius: 8px;
font-family: sans-serif;
font-weight: 800;
}
</style>
</head>
<body>
<div class="stage">
<div class="card">Perfectly Centred</div>
</div>
</body>
</html>By default align-items is stretch, so items grow to fill the container height. If your items look unexpectedly tall, that is why — set align-items to flex-start or center.
flex-wrap and gap
By default flex items all try to fit on one line (nowrap), shrinking if needed. Setting flex-wrap:wrap lets them flow onto new lines when they run out of room. The gap property adds consistent spacing between items and between wrapped rows — cleaner than margins.
<!DOCTYPE html>
<html>
<head>
<style>
.tags {
display: flex;
flex-wrap: wrap;
gap: 12px;
max-width: 340px;
background: #ecfeff;
padding: 14px;
border-radius: 8px;
font-family: sans-serif;
}
.tag {
background: #06b6d4;
color: #fff;
padding: 12px 20px;
border-radius: 999px;
font-weight: 700;
}
</style>
</head>
<body>
<div class="tags">
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">Flexbox</span>
<span class="tag">Grid</span>
<span class="tag">Responsive</span>
<span class="tag">Design</span>
</div>
</body>
</html>gap is supported by flexbox in all modern browsers. It replaced the old pattern of adding margins to every item and then removing the last one.
Key Points
- display:flex creates the container; direct children become flex items.
- flex-direction sets the main axis direction (row or column).
- justify-content spaces items along the main axis; align-items aligns them on the cross axis.
- justify-content:center + align-items:center centres an element in both directions.
- flex-wrap:wrap lets items flow to new lines; gap adds clean, consistent spacing.