Flexbox (Flexible Box Layout) is a modern CSS layout module that makes it easy to create flexible, responsive layouts in one dimension—either horizontally or vertically. Before Flexbox, creating even simple layouts often required complex CSS hacks. Flexbox revolutionized CSS layout by providing intuitive properties for distributing space, aligning items, and creating dynamic layouts that adapt to different screen sizes.
What Is Flexbox?
Flexbox is a one-dimensional layout system for arranging items in rows or columns. It excels at distributing space within a container and aligning items, even when their sizes are unknown or dynamic.
Key Flexbox Concepts
- Flex Container: The parent element with
display: flex - Flex Items: Direct children of the flex container
- Main Axis: Primary axis (horizontal by default)
- Cross Axis: Perpendicular to main axis (vertical by default)
- One-Dimensional: Layouts in a single direction at a time
/* Create a flex container */
.container {
display: flex; /* All direct children become flex items */
}
/* Flex items automatically become flexible */
.container > * {
/* These are flex items */
/* They can grow, shrink, and be aligned */
}
/* Basic flex container */
.container {
display: flex;
gap: 20px; /* Space between items */
}Block vs Flex Layout
When to Use Flexbox: Navigation bars, card layouts, centering content, distributing space evenly, aligning items, responsive layouts, one-dimensional arrangements (rows OR columns). For two-dimensional layouts (rows AND columns), use Grid instead.
Flex Container
To use Flexbox, you first create a flex container by setting display: flex (or display: inline-flex) on a parent element. All direct children automatically become flex items.
/* Create flex container */
.container {
display: flex; /* Block-level flex container */
display: inline-flex; /* Inline-level flex container */
}
/* Only direct children become flex items */
.container {
display: flex;
}
.container > .child {
/* This is a flex item ✓ */
}
.container > .child > .grandchild {
/* This is NOT a flex item ✗ */
/* Only direct children are flex items */
}display: flex vs inline-flex
Direct Children Only
Direct Children Are Flex Items
Main Axis and Cross Axis
Understanding axes is crucial to Flexbox. The main axis is the primary direction items are laid out, and the cross axis is perpendicular to it.
Main Axis (Horizontal by default)
Items flow along the main axis →
Cross Axis (Vertical by default)
Perpendicular to main axis ↓
Flexbox Axes
| Property | Values | Description |
|---|---|---|
Main Axis | Horizontal (default) | Direction items flow (controlled by flex-direction) |
Cross Axis | Vertical (default) | Perpendicular to main axis |
Main Start/End | Left/Right (default) | Beginning and end of main axis |
Cross Start/End | Top/Bottom (default) | Beginning and end of cross axis |
Important: The axes change based on flex-direction. When flex-direction: column, the main axis becomes vertical and the cross axis becomes horizontal. Properties that affect the main axis will now work vertically!
flex-direction
The flex-direction property defines the direction flex items are laid out in the flex container. It establishes the main axis.
/* Flex direction values */
.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 */
}
/* Row (default) - horizontal main axis */
.row-container {
display: flex;
flex-direction: row; /* Items flow horizontally → */
}
/* Column - vertical main axis */
.column-container {
display: flex;
flex-direction: column; /* Items flow vertically ↓ */
}Try changing flex-direction
Experiment with flexbox properties
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
}flex-direction Values
Practical flex-direction Examples
Practical flex-direction Uses
🔄 flex-direction Tip:
row-reverse and column-reverse reverse the visual order but not the tab order for keyboard navigation. For accessibility, avoid using reverse directions if it creates a mismatch between visual and DOM order.
flex-wrap
By default, flex items try to fit on one line. The flex-wrap property controls whether items should wrap to multiple lines when they don't fit.
/* Flex wrap values */
.container {
display: flex;
flex-wrap: nowrap; /* Default - all items on one line */
flex-wrap: wrap; /* Items wrap to new lines */
flex-wrap: wrap-reverse; /* Items wrap in reverse order */
}
/* No wrap (default) - items shrink to fit */
.container {
display: flex;
flex-wrap: nowrap; /* Items may overflow or shrink */
}
/* Wrap - responsive behavior */
.container {
display: flex;
flex-wrap: wrap; /* Items wrap to new lines as needed */
gap: 20px;
}flex-wrap Values
Responsive Card Grid with Wrap
Responsive Card Grid
flex-flow Shorthand
The flex-flow property is a shorthand for flex-direction and flex-wrap combined.
/* Shorthand syntax */
.container {
flex-flow: <flex-direction> <flex-wrap>;
}
/* Examples */
.container {
flex-flow: row wrap; /* Most common */
flex-flow: column nowrap; /* Vertical, no wrap */
flex-flow: row-reverse wrap; /* Reverse and wrap */
flex-flow: column wrap; /* Vertical with wrap */
}
/* Same as: */
.container {
flex-direction: row;
flex-wrap: wrap;
}
/* vs shorthand: */
.container {
flex-flow: row wrap;
}flex-flow Shorthand
gap Property
The gap property (formerly grid-gap) creates space between flex items without needing margins. It's the modern way to add spacing in Flexbox.
/* Gap creates space between items */
.container {
display: flex;
gap: 20px; /* 20px space between all items */
}
/* Row and column gaps separately */
.container {
display: flex;
flex-wrap: wrap;
row-gap: 30px; /* Vertical space */
column-gap: 20px; /* Horizontal space */
}
/* Shorthand: row-gap column-gap */
.container {
display: flex;
gap: 30px 20px; /* 30px vertical, 20px horizontal */
}
/* Before gap property (old way) */
.item {
margin-right: 20px;
margin-bottom: 20px;
}
.item:last-child {
margin-right: 0;
}
/* With gap (modern way) */
.container {
display: flex;
gap: 20px; /* Much cleaner! */
}gap Property
✨ Gap Advantage:
The gap property is much cleaner than using margins because it automatically applies spacing only between items (not on edges), and you don't need special rules for last children or wrapping. It's supported in all modern browsers!
Key Takeaways
- display: flex creates a flex container; direct children become flex items
- Main axis: Primary direction (horizontal by default)
- Cross axis: Perpendicular to main axis (vertical by default)
- flex-direction: Controls main axis direction (row, row-reverse, column, column-reverse)
- flex-wrap: Controls whether items wrap to multiple lines (nowrap, wrap, wrap-reverse)
- flex-flow: Shorthand for flex-direction and flex-wrap
- gap: Modern way to add spacing between flex items
- Only direct children become flex items
- Flexbox is one-dimensional (row OR column at a time)
- Axes change when you change flex-direction
- Use wrap for responsive layouts that adapt to screen size
- Flexbox makes common layouts much easier than floats or positioning
What's Next?
Now that you understand Flexbox fundamentals, you're ready to learn about Flexbox Alignment. In the next lesson, we'll explore how to align and distribute flex items using justify-content, align-items, align-content, and individual item alignment properties. These are the properties that make Flexbox truly powerful for creating flexible, well-aligned layouts.
Flexbox basics give you the foundation—containers, items, axes, and direction. But the real power comes from alignment and distribution, which we'll cover next. You're building the skills to create modern, responsive layouts with ease!