CSS
Flexbox Basics
Transform rigid layouts into flexible, responsive designs with CSS Flexbox fundamentals.
Flexbox changes everything about how we build layouts. Before flexbox, centering a div vertically required hacky tricks and dozens of lines of code. With flexbox, it takes one line. Flexbox — short for flexible box layout — lets containers automatically arrange their children in rows or columns, distribute space evenly, and align items perfectly.What is Flexbox?
Think of flexbox like organizing items on a shelf. You can arrange books in a row, stack them vertically, space them evenly apart, or bunch them together at one end. The shelf is the flex container and the books are flex items. Every flexbox layout has two parts:Flex Container (Parent)
The element with display: flex that controls the layout
Flex Items (Children)
The direct children inside the flex container
Creating Your First Flex Container
The WanderLust team wants to arrange their navigation menu horizontally instead of stacked vertically. Here's how flexbox makes this effortless:/* Turn the navigation into a flexible container */
.nav-menu {
display: flex; /* This single line creates flexbox magic */
}
/* Style the navigation items */
.nav-item {
padding: 12px 20px;
color: #0f172a;
text-decoration: none;
}What just happened?
The moment we added display: flex, all the navigation items automatically arranged themselves in a horizontal row. The flex container handles the positioning while each flex item maintains its content size.
The Main Axis and Cross Axis
Flexbox uses two invisible lines to control layout. Understanding these axes is crucial for mastering flexbox:Flex Direction
The `flex-direction` property controls which way your flex items flow. Think of it like choosing whether books go side-by-side or stacked up:/* WanderLust wants their feature cards in a column layout */
.features-container {
display: flex;
flex-direction: column; /* Stack items vertically */
gap: 20px; /* Space between each item */
}
.feature-card {
background: #f8fafc;
padding: 24px;
border-radius: 12px;
border-left: 4px solid #0ea5e9;
}What just happened?
With flex-direction: column, the main axis flipped from horizontal to vertical. Now items stack top-to-bottom instead of left-to-right. The gap property adds consistent space between each card.
row (default)
Items flow left to right →
row-reverse
Items flow right to left ←
column
Items stack top to bottom ↓
column-reverse
Items stack bottom to top ↑
Justify Content
`justify-content` controls how flex items spread out along the main axis. Imagine you have three books on a shelf — do you want them bunched at the left, centered, or spread evenly across the whole shelf?/* WanderLust wants their call-to-action buttons centered */
.cta-buttons {
display: flex;
justify-content: center; /* Center items on the main axis */
gap: 16px; /* Space between buttons */
padding: 40px 20px;
}
.cta-button {
background: #0ea5e9;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-weight: 700;
}flex-start
Pack items at the beginning
center
Center items in the middle
space-between
Equal space between items
space-around
Equal space around each item
Align Items
While `justify-content` handles the main axis, `align-items` controls the cross axis. If your flex direction is row (horizontal), align-items handles vertical positioning./* WanderLust wants their header logo and navigation perfectly aligned */
.header {
display: flex;
justify-content: space-between; /* Logo left, nav right */
align-items: center; /* Perfect vertical centering */
padding: 20px;
background: #0f172a;
color: white;
}
.logo {
font-size: 24px;
font-weight: 900;
color: #0ea5e9;
}
.header-nav {
display: flex;
gap: 20px;
}What just happened?
The combination of justify-content: space-between pushes the logo and navigation to opposite ends, while align-items: center vertically centers everything perfectly.
Key difference:
justify-content = main axis (horizontal by default), align-items = cross axis (vertical by default). When flex-direction is column, these flip!
Flex Wrap
By default, flex items try to fit on one line, even if they overflow the container. The `flex-wrap` property lets items wrap to new lines when they run out of space:/* WanderLust destination cards that wrap to new rows */
.destinations-grid {
display: flex;
flex-wrap: wrap; /* Allow items to wrap to new lines */
gap: 20px;
padding: 20px;
}
.destination-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
flex: 0 0 280px; /* Don't grow, don't shrink, 280px base width */
}What just happened?
With flex-wrap: wrap, the destination cards automatically move to new rows when they run out of horizontal space. The flex: 0 0 280px keeps each card exactly 280px wide.
Before and After Flexbox
Here's what the same layout looks like without flexbox versus with flexbox:Common beginner mistake:
Don't forget that flexbox only affects direct children. If you want to flex items inside flex items, you need to make those children flex containers too.
Quiz
1. What CSS property does the WanderLust team need to add to turn a regular div into a flex container?
2. WanderLust wants their navigation links centered horizontally in a flex container. Which property achieves this?
3. What flex-direction value makes WanderLust's feature cards stack vertically instead of horizontally?
Up Next: Flexbox Advanced
Master flex-grow, flex-shrink, flex-basis, and build complex responsive layouts.