Table of Contents
Introduction to CSS Flexbox
CSS Flexbox is a one-dimensional layout module that makes it incredibly easy to design flexible responsive layout structures with minimal code. It's one of the most important CSS features for modern web development.
What is Flexbox?
Flexbox (Flexible Box Module) provides an efficient way to arrange, distribute, and align elements in a container—even when their size is unknown or dynamic. Unlike traditional layout methods (floats, positioning), flexbox automatically handles spacing, alignment, and responsive behavior.
When Should You Use Flexbox?
- Navigation bars — Aligning menu items horizontally or vertically
- Card grids — Creating flexible, wrapping layouts
- Centering content — Both horizontally and vertically (the "holy grail")
- Form layouts — Arranging labels and inputs
- Sidebar layouts — Main content with fixed or flexible sidebars
- Vertical spacing — Distributing space among items
- One-dimensional layouts — When you don't need a two-dimensional grid
Browser Support
Flexbox has excellent browser support. All modern browsers (Chrome, Firefox, Safari, Edge) support flexbox fully. No IE 11 support without prefixes.
/* Enable Flexbox on a container */
.flex-container {
display: flex;
}
Flexbox Container Properties
These properties are applied to the flex container (parent element). They control how flex items are laid out and distributed within the container.
1. display: flex
The foundation of flexbox. This property activates flexbox layout on a container and makes all direct children flex items.
.container {
display: flex;
/* Items will now be flex items */
}
2. flex-direction
Defines the direction in which flex items are placed in the flex container. Controls the main axis orientation.
Values:
row(default) — Left to rightrow-reverse— Right to leftcolumn— Top to bottomcolumn-reverse— Bottom to top
.container {
display: flex;
flex-direction: column;
}
3. flex-wrap
Determines whether flex items should wrap to a new line when they don't fit in the container.
Values:
nowrap(default) — All items stay on one linewrap— Items wrap to the next linewrap-reverse— Items wrap in reverse order
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
4. justify-content
Aligns flex items along the main axis. It distributes space between and around items.
Values:
flex-start(default) — Items at the startflex-end— Items at the endcenter— Items centeredspace-between— Space between items equallyspace-around— Space around items equallyspace-evenly— Space evenly distributed
.container {
display: flex;
justify-content: space-between;
}
5. align-items
Aligns flex items along the cross axis (perpendicular to the main axis).
Values:
stretch(default) — Items stretch to fill the containerflex-start— Items aligned to the startflex-end— Items aligned to the endcenter— Items centeredbaseline— Items aligned to baseline
.container {
display: flex;
align-items: center;
height: 200px;
}
6. align-content
Aligns flex lines when there's extra space in the cross axis (only works with flex-wrap: wrap).
Values:
stretch(default) — Lines stretch to fill the containerflex-start— Lines aligned to startcenter— Lines centeredspace-between— Space between linesspace-around— Space around lines
.container {
display: flex;
flex-wrap: wrap;
align-content: center;
height: 300px;
}
7. gap (row-gap, column-gap)
Defines the space between flex items. Modern alternative to margin-based spacing.
.container {
display: flex;
gap: 20px;
/* Or: row-gap: 20px; column-gap: 10px; */
}
Flexbox Item Properties
These properties are applied to flex items (children of flex containers). They control how individual items grow, shrink, and align.
1. flex-grow, flex-shrink & flex-basis
These properties control how flex items expand and contract to fill available space.
flex-grow
Defines how much a flex item will grow relative to other items. Default: 0.
.item {
flex-grow: 1;
/* Item will grow to fill available space */
}
flex-shrink
Defines how much a flex item will shrink relative to other items. Default: 1.
.item {
flex-shrink: 0;
/* Item won't shrink below flex-basis */
}
flex-basis
The default size of a flex item before flex-grow/shrink is applied. Default: auto.
.item {
flex-basis: 200px;
/* Item starts at 200px width */
}
2. flex (Shorthand)
Combines flex-grow, flex-shrink, and flex-basis into one property. Recommended approach.
/* flex: grow shrink basis */
.item {
flex: 1 1 200px;
}
Common flex shorthand values:
flex: 1— Equivalent to flex: 1 1 0flex: 0 0 auto— Item doesn't grow or shrinkflex: 1 0 200px— Grows, doesn't shrink, 200px basis
3. order
Changes the visual order of flex items without affecting HTML order. Default: 0.
.item-1 { order: 2; }
.item-2 { order: 1; }
.item-3 { order: 3; }
/* Displays in order: Item 2, Item 1, Item 3 */
4. align-self
Allows individual flex items to override the container's align-items property.
Values (same as align-items):
auto(default) — Inherits from align-itemsflex-start,flex-end,center,stretch,baseline
.container {
display: flex;
align-items: flex-start;
height: 200px;
}
.item-special {
align-self: center;
/* This item centers despite align-items: flex-start */
}
Common Flexbox Layout Patterns
Pattern 1: Perfect Centering (The "Holy Grail")
Center content both horizontally and vertically—one of the most common use cases.
.center-container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
Pattern 2: Navigation Bar
Create a horizontal navigation bar with logo on left and menu items on right.
/* HTML structure */
/* CSS */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
}
Pattern 3: Card Grid
Responsive card layout that wraps on smaller screens.
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 300px;
background: #1a1a1a;
padding: 20px;
border-radius: 8px;
}
Pattern 4: Sidebar Layout
Main content area with a fixed-width sidebar.
.layout {
display: flex;
gap: 20px;
}
.sidebar {
flex: 0 0 250px; /* Fixed width, no grow/shrink */
}
.main {
flex: 1; /* Takes remaining space */
}
Pattern 5: Sticky Footer
Footer always sticks to the bottom of the page, even with minimal content.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1; /* Grows to fill available space */
}
footer {
/* Stays at bottom */
}
Pattern 6: Equal Height Columns
Make all columns the same height regardless of content.
.columns {
display: flex;
gap: 20px;
}
.column {
flex: 1 1 0;
/* flex-basis: 0 ensures equal width distribution */
}
Flexbox vs CSS Grid: When to Use Each
While both are powerful layout tools, they solve different problems. Flexbox is one-dimensional (row or column), while Grid is two-dimensional (rows and columns).
| Feature | Flexbox | CSS Grid |
|---|---|---|
| Dimensions | 1D (row or column) | 2D (rows and columns) |
| Best for | Linear layouts, navigation, alignment | Complex page layouts, dashboards |
| Content-first or layout-first? | Content-first (items drive layout) | Layout-first (grid defines structure) |
| Wrapping | Yes (flex-wrap) | Rows automatically created |
| Browser support | Excellent (all modern browsers) | Excellent (all modern browsers) |
| Learning curve | Easier for beginners | More complex, more powerful |
Use Flexbox When:
- Building navigation bars or menus
- Creating a list of items with flexible sizing
- Distributing space along a single axis
- Centering content (vertically or horizontally)
- Creating responsive card layouts with wrapping
- Building flexible sidebars or toolbars
Use CSS Grid When:
- Creating complex page layouts with multiple sections
- Building dashboard layouts with rows and columns
- Aligning items in both dimensions simultaneously
- Creating template-based layouts
- Building masonry-style layouts
- Defining a complete page structure
Pro tip: Often, the best solution combines Flexbox for content alignment with Grid for page structure. Use Grid for the main layout and Flexbox for component-level layouts.
Need a CSS Grid Guide?
Check out our comprehensive CSS Grid guide to master two-dimensional layouts.
CSS Grid Guide →Frequently Asked Questions
Q: How do I center content horizontally and vertically with Flexbox?
Use both justify-content: center and align-items: center on the container, along with a fixed height:
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
This centers any content within that container perfectly.
Q: What's the difference between justify-content and align-items?
justify-content aligns items along the main axis (horizontal in row direction).
align-items aligns items along the cross axis (vertical in row direction).
Think of it this way: if your flex-direction is row, justify-content handles left-right spacing, and align-items handles top-bottom spacing.
Q: How do I make equal-width columns in Flexbox?
Set flex: 1 on each column. This makes them grow equally to fill available space:
.columns {
display: flex;
gap: 20px;
}
.column {
flex: 1; /* Equal width columns */
}
Q: How do I prevent items from shrinking below a minimum size?
Use flex-shrink: 0 or set a min-width:
.item {
flex-shrink: 0; /* Won't shrink */
width: 200px;
}
/* Or use min-width */
.item {
flex: 1;
min-width: 150px; /* Won't shrink below 150px */
}
Q: Why aren't my flex items wrapping?
You need to add flex-wrap: wrap to the container. By default, Flexbox is flex-wrap: nowrap, which forces all items onto one line:
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
Without flex-wrap, items will shrink to fit rather than wrap to a new line.
Ready to Master Flexbox?
Use our interactive Flexbox generator to experiment with different properties and see real-time results.
Explore interactive demos and build layouts with real-time visualization.
Flexbox Cheat Sheet
Container Properties Quick Reference
/* Container */
.flex-container {
display: flex;
flex-direction: row; /* row, column, row-reverse, column-reverse */
flex-wrap: wrap; /* nowrap, wrap, wrap-reverse */
justify-content: center; /* start, end, center, space-between, space-around, space-evenly */
align-items: center; /* stretch, start, end, center, baseline */
align-content: center; /* Used with flex-wrap: wrap */
gap: 20px; /* Space between items */
}
Item Properties Quick Reference
/* Item */
.flex-item {
flex: 1 1 200px; /* Shorthand: grow shrink basis */
/* Or individually: */
flex-grow: 1; /* How much to grow (0-∞) */
flex-shrink: 1; /* How much to shrink (0-∞) */
flex-basis: 200px; /* Base size before grow/shrink */
order: 1; /* Change visual order */
align-self: center; /* Override container align-items */
}
Common Patterns
/* Centering */
.center { display: flex; justify-content: center; align-items: center; }
/* Space Between */
.space-between { display: flex; justify-content: space-between; }
/* Column Layout */
.column { display: flex; flex-direction: column; }
/* Equal Width Items */
.equal { display: flex; }
.equal > * { flex: 1; }
/* Wrap with Gap */
.wrap { display: flex; flex-wrap: wrap; gap: 20px; }
/* Sidebar */
.sidebar-layout { display: flex; gap: 20px; }
.sidebar { flex: 0 0 250px; }
.main { flex: 1; }
Conclusion
CSS Flexbox is an indispensable tool for modern web development. With these 7 container properties and 4 item properties, you can create virtually any flexible layout. The key to mastering Flexbox is understanding the main and cross axes, and how justify-content and align-items work along those axes.
Remember: Flexbox is perfect for one-dimensional layouts. For complex two-dimensional layouts, consider CSS Grid. Most modern applications use both—Grid for page structure and Flexbox for component-level layouts.
Now that you understand Flexbox comprehensively, experiment with the interactive demos above and start building responsive layouts. Happy coding!