CSS Flexbox Container
Flexbox is a powerful one-dimensional layout method that makes it easy to align, distribute, and order elements within a container.
Flex Container Properties
Quick Reference
| Property | Values | Purpose |
|---|---|---|
display: flex |
— | Creates flex container |
flex-direction |
row, row-reverse, column, column-reverse |
Main axis direction |
flex-wrap |
nowrap, wrap, wrap-reverse |
Whether items wrap |
justify-content |
flex-start, flex-end, center, space-between, space-around, space-evenly |
Main axis alignment |
align-items |
flex-start, flex-end, center, stretch, baseline |
Cross axis alignment |
align-content |
flex-start, flex-end, center, space-between, space-around, stretch |
Multi-line cross axis |
gap |
10px, 10px 20px |
Space between items |
flex-direction
Controls the main axis direction:
Example
HTML
<style>
.container {
display: flex;
flex-direction: row; /* Default: horizontal */
gap: 10px;
background: #f5f5f5;
padding: 10px;
}
.item {
background: #3498db;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
justify-content
Aligns items along the main axis:
Example
HTML
<style>
.container {
display: flex;
justify-content: space-between;
background: #f5f5f5;
padding: 10px;
}
.item {
background: #e74c3c;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div class="item">Start</div>
<div class="item">Middle</div>
<div class="item">End</div>
</div>
Common values:
flex-start: Items at start (default)flex-end: Items at endcenter: Items centeredspace-between: Equal space between itemsspace-around: Equal space around itemsspace-evenly: Equal space between and around
align-items
Aligns items along the cross axis:
Example
HTML
<style>
.container {
display: flex;
align-items: center;
height: 200px;
background: #f5f5f5;
padding: 10px;
}
.item {
background: #2ecc71;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div class="item">Short</div>
<div class="item">Tall item with more content</div>
<div class="item">Medium</div>
</div>
flex-wrap
Controls whether items wrap to new lines:
Example
HTML
<style>
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
background: #f5f5f5;
padding: 10px;
width: 300px;
}
.item {
background: #9b59b6;
color: white;
padding: 10px;
width: 120px;
}
</style>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
gap
Sets spacing between flex items:
Example
HTML
<style>
.container {
display: flex;
gap: 20px;
background: #f5f5f5;
padding: 10px;
}
.item {
background: #f39c12;
color: white;
padding: 10px;
flex: 1;
}
</style>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
❓ FAQ
Q Does justify-content change direction when flex-direction is column?
A Yes. `justify-content` always works along the main axis. When `flex-direction: row`, main axis is horizontal; when `column`, main axis becomes vertical. Remember: `justify-content` controls main axis, `align-items` controls cross axis.
Q When should I use flex-wrap?
A When items don't fit in one line. Default (`nowrap`) compresses items; `wrap` lets them flow to next line. Essential for responsive layouts where items should stack on smaller screens.
Q What's the difference between align-items and align-content?
A `align-items` controls single-line item alignment (within each line). `align-content` controls multi-line space distribution (only works with multiple lines). Single-line: `align-content` is ignored.
📖 Summary
- Flexbox container properties control "overall" behavior — how items arrange, wrap, and align
- Remember:
justify-contentcontrols main axis,align-itemscontrols cross axis - If
flex-directionchanges, these two swap their effective directions
📝 Exercises
Basic
- Create a flex container with 5 items. Try all four
flex-directionvalues to observe direction changes. - Demonstrate all 6
justify-contentvalues with screenshots for comparison.
Intermediate
- Set
flex-wrap: wrapand observe multi-line alignment with differentalign-contentvalues. - Compare
gapproperty withmarginfor spacing — appreciate gap's convenience.
Challenge
- Create a responsive navbar: desktop has logo left, menu right; mobile has logo left, hamburger right, menu hidden.
- Create a card list with
justify-content: space-betweenfor even distribution, last row left-aligned.