CSS Flex Container
In this page:
flex-direction
The flex-direction property sets the main axis: row (default, left to right), row-reverse, column (top to bottom), or column-reverse. Changing this doesn't just reverse visual order — it swaps which axis justify-content and align-items operate on, since "main axis" always follows flex-direction.
Example: flex-direction
<style>
.container {
display: flex;
flex-direction: column;
background: #eef;
padding: 10px;
gap: 8px;
}
.container div {
background: dodgerblue;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>Top</div>
<div>Bottom</div>
</div>flex-wrap
By default flex items stay on a single line and shrink to fit (nowrap). Setting flex-wrap: wrap allows items to flow onto additional lines when they no longer fit, which is essential for responsive card grids; wrap-reverse does the same but stacks new lines above instead of below.
Example: flex-wrap
<style>
.container {
display: flex;
flex-wrap: wrap;
background: #eef;
padding: 10px;
gap: 8px;
}
.item {
width: 150px;
background: coral;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>flex-flow shorthand
The flex-flow property combines flex-direction and flex-wrap into one declaration, e.g. flex-flow: row wrap. It is purely a convenience shorthand — using the two longhand properties separately produces identical results, so pick whichever reads clearer in your stylesheet.
Example: flex-flow shorthand
<style>
.container {
display: flex;
flex-flow: row wrap;
background: #eef;
padding: 10px;
gap: 8px;
}
.container div {
background: coral;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>A</div>
<div>B</div>
</div>justify-content and align-items
justify-content distributes extra space along the main axis (flex-start, center, space-between, space-around, space-evenly), while align-items aligns items along the cross axis (stretch by default, plus flex-start, center, flex-end, baseline). These two properties together solve the vast majority of real-world centering and spacing problems.
Example: justify-content and align-items
<style>
.container {
display: flex;
height: 150px;
justify-content: center;
align-items: center;
background: #eef;
}
.container div {
background: dodgerblue;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>Centered both ways</div>
</div>align-content for Multi-Line Wrapping
align-content only has a visible effect once a flex container has wrapped onto multiple lines (via flex-wrap: wrap) and has leftover cross-axis space — it controls how those lines are distributed, not how items within a single line align (that's align-items' job). It's a commonly confused property precisely because it does nothing on a single-line flex row.
Example: align-content for Multi-Line Wrapping
<style>
.container {
display: flex;
flex-wrap: wrap;
height: 200px;
align-content: space-between;
background: #eef;
}
.item {
width: 150px;
background: coral;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: