Flexbox Layout
What is Flexbox?
Flexbox (Flexible Box Layout) is a CSS layout system designed to arrange elements in a row or column and distribute space between them efficiently. Before Flexbox, centring an element or creating equal-width columns required complex hacks. Flexbox solves these problems with a simple, declarative API.
Flexbox operates on two levels:
- The flex container — the parent element with
display: flex - The flex items — the direct children of the container
Activating Flexbox
Set display: flex on the parent element:
<nav class="navbar">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
.navbar {
display: flex;
}
By default, the children line up in a row from left to right.
flex-direction
Controls whether items are arranged in a row or column:
.container {
display: flex;
flex-direction: row; /* default — left to right */
flex-direction: row-reverse; /* right to left */
flex-direction: column; /* top to bottom */
flex-direction: column-reverse; /* bottom to top */
}
justify-content
Distributes space along the main axis (horizontal in a row, vertical in a column):
.container {
display: flex;
justify-content: flex-start; /* default — items at the start */
justify-content: flex-end; /* items at the end */
justify-content: center; /* items centred */
justify-content: space-between; /* first and last at edges, even gaps between */
justify-content: space-around; /* equal space around each item */
justify-content: space-evenly; /* equal space between and at edges */
}
A navigation bar is a perfect use case:
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 32px;
}
align-items
Distributes space along the cross axis (perpendicular to the main axis):
.container {
display: flex;
align-items: flex-start; /* items aligned to the top (in a row) */
align-items: flex-end; /* items aligned to the bottom */
align-items: center; /* items vertically centred */
align-items: stretch; /* default — items stretch to fill the container height */
}
Centring an element (the classic challenge)
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
This perfectly centres a child element both horizontally and vertically. It used to take many lines of CSS hacks before Flexbox.
gap
The gap property adds space between flex items without affecting the outer edges:
.card-row {
display: flex;
gap: 24px;
}
Before gap existed, developers used margin on each child, which caused edge-case issues. Always prefer gap.
flex-wrap
By default, flex items never wrap to a new line — they shrink to fit. flex-wrap: wrap allows items to wrap:
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.card {
flex: 1 1 280px; /* grow, shrink, and have a minimum base width of 280px */
}
This is a powerful responsive pattern: cards sit side by side on wide screens and stack on narrow screens without any media queries.
Flex Item Properties
These properties go on the children, not the container:
flex
The flex shorthand combines three values: flex-grow, flex-shrink, and flex-basis:
.item { flex: 1; } /* grow equally, shrink equally, start from auto */
.item { flex: 2; } /* this item gets twice as much space as flex: 1 items */
.item { flex: 0 0 200px; } /* fixed width of 200px, no growing or shrinking */
align-self
Override align-items for a single item:
.badge {
align-self: flex-start; /* stays at the top even if siblings are centred */
}
order
Change the visual order without changing the HTML:
.featured { order: -1; } /* appears first regardless of HTML position */
A Complete Flexbox Example
<header class="site-header">
<div class="logo">CareerEx</div>
<nav class="nav-links">
<a href="/">Courses</a>
<a href="/about">About</a>
<a href="/join">Join Now</a>
</nav>
</header>
<div class="feature-cards">
<div class="card">HTML</div>
<div class="card">CSS</div>
<div class="card">JavaScript</div>
</div>
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 40px;
background: #0F1C3A;
color: white;
}
.nav-links {
display: flex;
gap: 32px;
}
.nav-links a {
color: white;
text-decoration: none;
font-size: 0.9rem;
}
.feature-cards {
display: flex;
flex-wrap: wrap;
gap: 24px;
padding: 40px;
}
.card {
flex: 1 1 200px;
background: white;
border-radius: 12px;
padding: 32px;
text-align: center;
font-weight: 700;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
Practice Exercise
Build a navigation bar and a row of feature cards:
- Make
.navbara flex container with items spread apart usingspace-between - Vertically centre all items with
align-items: center - Make the nav links sit in a row with a
gapof 24px - Create a
.cardsflex row that wraps on small screens usingflex-wrap: wrap - Give each
.cardaflex: 1 1 200pxso they grow and wrap naturally
Try it yourself
Key Takeaways
- Flexbox is activated with display: flex on the parent container
- justify-content distributes space along the main axis (horizontal in a row)
- align-items distributes space along the cross axis (vertical in a row)
- Use gap instead of margin to add space between flex items
- flex-wrap: wrap allows items to move to a new line when they run out of space
- The flex shorthand (flex: 1 1 280px) sets grow, shrink, and basis in one declaration
Quick Quiz
1.What CSS property activates Flexbox on a container?
2.Which justify-content value places equal space between items, with no space at the edges?
3.What does 'align-items: center' do in a flex row?
4.What does 'flex: 1 1 280px' mean on a flex item?
Ready to go further?
CareerEx gives you structured 12-week training, live classes every Saturday and Sunday, real tutor feedback, and a certificate. Join the next cohort.
Join CareerEx