https://www.youtube.com/watch?v=K74l26pE4YA
Flexbox (Flexible Box Layout) is a CSS layout mode designed for arranging items in a single row or column. It gives you fine control over how items grow, shrink, align, and distribute space — without the float hacks and clearfix workarounds that predated it.
The core idea: you turn a parent element into a flex container, and its direct children automatically become flex items that respond to your layout rules.
.nav {
display: flex; /* that's it — children are now flex items */
}
These properties go on the parent (the flex container):
flex-direction — which axis items flow along
.container {
display: flex;
flex-direction: row; /* default: left → right */
flex-direction: column; /* top → bottom */
flex-direction: row-reverse; /* right → left */
}
justify-content — alignment along the main axis (direction of flow)
.container {
display: flex;
justify-content: flex-start; /* default: pack items at start */
justify-content: flex-end; /* pack items at end */
justify-content: center; /* center items */
justify-content: space-between; /* first and last at edges, even gaps */
justify-content: space-around; /* equal space around each item */
justify-content: space-evenly; /* equal space between all items */
}
align-items — alignment along the cross axis (perpendicular to flow)
.container {
display: flex;
align-items: stretch; /* default: items fill cross-axis height */
align-items: flex-start; /* align to start of cross axis */
align-items: flex-end; /* align to end of cross axis */
align-items: center; /* center on cross axis */
}
gap — consistent spacing between items (replaces margin hacks)
.container {
display: flex;
gap: 16px; /* equal gap in all directions */
gap: 8px 16px; /* row gap, column gap */
}
flex-wrap — whether items can wrap to a new line
.card-grid {
display: flex;
flex-wrap: wrap; /* items wrap instead of shrinking into oblivion */
}
These properties go on the children (flex items):
flex — shorthand for how an item grows, shrinks, and what its base size is
/* flex: grow shrink basis */
.item { flex: 1; } /* shorthand for flex: 1 1 0% — grow equally */
.item { flex: 0 0 200px; } /* fixed 200px, no growing or shrinking */
.item { flex: 2; } /* grows at twice the rate of flex: 1 items */
align-self — overrides align-items for a single item
.item-special {
align-self: flex-end; /* just this item aligns differently */
}
Centered content (vertically and horizontally)
.hero {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Navigation bar
.navbar {
display: flex;
justify-content: space-between; /* logo left, links right */
align-items: center;
padding: 0 24px;
height: 64px;
}
.navbar__links {
display: flex;
gap: 24px; /* consistent spacing between links */
}
Card row with equal-width cards
.card-row {
display: flex;
gap: 16px;
}
.card {
flex: 1; /* each card takes up equal space */
padding: 24px;
border: 1px solid #e2e8f0;
border-radius: 8px;
}
Sidebar layout
.layout {
display: flex;
gap: 24px;
}
.sidebar {
flex: 0 0 240px; /* fixed 240px, never grows or shrinks */
}
.main-content {
flex: 1; /* takes all remaining space */
}
<aside> 💡
Info
When items have flex-direction: row (the default), justify-content controls horizontal alignment and align-items controls vertical alignment. When you switch to flex-direction: column, those axes flip. Keep this in mind when the alignment properties aren't doing what you expect.
</aside>
<aside> ⌨️
Hands On
Create an index.html file with this starter:
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
Style .container with display: flex and experiment with justify-content values: flex-start, center, space-between, space-evenly. Then try adding flex-direction: column and see how the same properties behave differently.
</aside>
One of flexbox's most useful patterns — items that sit in a row on wide screens and wrap gracefully on smaller ones:
.projects {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.project-card {
flex: 1 1 280px; /* grow, shrink, but never below 280px */
padding: 24px;
border: 1px solid #e2e8f0;
border-radius: 8px;
}
Each card has a minimum width of 280px. When the container gets narrow, cards wrap to the next row automatically — no media queries required.
<aside> 🎉
Flexbox unlocked
You now know enough flexbox to build navbars, card rows, centered heroes, and sidebar layouts. These four patterns cover the majority of UI components you'll build in the real world. Everything else is a variation.
</aside>
The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0 *https://hackyourfuture.net/*
Built with ❤️ by the HackYourFuture community · Thank you, contributors
Found a mistake or have a suggestion? Let us know in the feedback form.