CSS Flex Container

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>