CSS Flex Container

When building responsive layouts in modern web design, CSS Flexbox is one of the most powerful layout systems. At the heart of Flexbox is the flex container, which controls how its child elements (flex items) are arranged, aligned, and wrapped.

In this guide, we’ll quickly cover the key CSS Flex Container properties—flex-direction, flex-wrap, flex-flow, justify-content, align-items, and align-content—with clear explanations and practical examples.

What is a Flex Container?

A flex container is simply an element whose display property is set to flex (or inline-flex). This enables the Flexbox layout mode, giving you complete control over how its child elements (called flex items) are positioned and aligned.

Example:

.flex-container {
  display: flex;
  background-color: lightblue;
}
.flex-container div {
  background: darkblue;
  color: white;
  margin: 5px;
  padding: 20px;
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Output :

CSS Flex Container Properties

Flex containers have a set of special properties that control how items behave. Let’s break them down one by one.

1. flex-direction – Main Axis Direction

The flex-direction property defines the direction in which flex items are placed inside the container. By default, items are placed horizontally (row).

Values:

• row → Items in a row (default)
• row-reverse → Items in a row, but reversed
• column → Items in a column
• column-reverse → Items in a column, but reversed

Example:

.flex-container {
  display: flex;
  flex-direction: column; /* Items will stack vertically */
  background: #f2f2f2;
  padding: 20px;
  gap: 10px; /* space between items */
}

.flex-item {
  background: #4caf50;
  color: white;
  padding: 15px;
  text-align: center;
  border-radius: 5px;
}

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

Output :

2. flex-wrap – Control Item Wrapping

By default, all flex items try to fit into one line. The flex-wrap property allows them to wrap into multiple lines if necessary.

Values:

• nowrap → Items stay in one line (default)
• wrap → Items wrap onto new lines if needed
• wrap-reverse → Items wrap but in reverse order

Example:

.flex-container {
  display: flex;
  flex-wrap: wrap;  /* items will move to next line if needed */
  background: #f2f2f2;
  padding: 20px;
  gap: 10px;
}

.flex-item {
  background: #2196f3;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
  flex: 0 0 150px; /* each item has fixed width */
}

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
  <div class="flex-item">Item 4</div>
  <div class="flex-item">Item 5</div>
  <div class="flex-item">Item 6</div>
  <div class="flex-item">Item 7</div>
  <div class="flex-item">Item 8</div>
</div>

Output :

3. flex-flow – Shorthand for Direction + Wrap

The flex-flow property is a shorthand that combines flex-direction and flex-wrap into one line.

Syntax:

flex-flow: <flex-direction> <flex-wrap>;

Example:

.flex-container {
  display: flex;
  flex-flow: row wrap; /* row direction + wrap items */
  background: #f2f2f2;
  padding: 20px;
  gap: 10px;
}

.flex-item {
  background: #ff5722;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
  flex: 0 0 150px;
}

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
  <div class="flex-item">Item 4</div>
  <div class="flex-item">Item 5</div>
  <div class="flex-item">Item 6</div>
</div>

Output :

4. justify-content – Align Items on Main Axis

The justify-content property aligns items along the main axis (horizontal if row, vertical if column).

Values:

• flex-start → Items at the start (default)
• flex-end → Items at the end
• center → Items centered
• space-between → Equal space between items
• space-around → Equal space around items
• space-evenly → Equal spacing everywhere

Example:

.flex-container {
  display: flex;
  justify-content: space-between; /* distribute items evenly along main axis */
  background: #f2f2f2;
  padding: 20px;
}

.flex-item {
  background: #673ab7;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

Output :

5. align-items – Align Items on Cross Axis

The align-items property aligns flex items along the cross axis (perpendicular to the main axis).

Values:

• stretch → Stretches items to fill (default)
• flex-start → Aligns items at the start
• flex-end → Aligns items at the end
• center → Aligns items in the middle
• baseline → Aligns items by their text baseline

Example:

.flex-container {
  display: flex;
  height: 200px;
  align-items: center; /* vertically center items */
  background: #f2f2f2;
  gap: 10px;
}

.flex-item {
  background: #009688;
  color: white;
  padding: 20px;
  border-radius: 5px;
}

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

Output :

6. align-content – Align Multiple Rows

When items wrap into multiple lines, the align-content property controls the alignment of those lines (not individual items).

Values:

• stretch → Stretches lines (default)
• flex-start → Packs lines at the top
• flex-end → Packs lines at the bottom
• center → Packs lines in the center
• space-between → Equal space between lines
• space-around → Equal space around lines
• space-evenly → Equal spacing everywhere

Example:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  height: 200px;
  align-content: flex-end; 
  background: #f2f2f2;
  gap: 10px;
}

.flex-item {
  background: #e91e63;
  color: white;
  padding: 20px;
  text-align: center;
  flex: 0 0 150px;
  border-radius: 5px;
}

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
  <div class="flex-item">Item 4</div>
  <div class="flex-item">Item 5</div>
  <div class="flex-item">Item 6</div>
  <div class="flex-item">Item 7</div>
  <div class="flex-item">Item 8</div>
</div>

Output :

Perfect Centering with Flexbox

A common CSS challenge is centering an item both horizontally and vertically. Flexbox makes this super easy:

Example:

.flex-container {
  display: flex;
  justify-content: center; /* horizontal centering */
  align-items: center;     /* vertical centering */
  height: 300px;
  background: lightgray;
}

.flex-item {
  background: #ff9800;
  color: white;
  padding: 30px;
  border-radius: 8px;
}

<div class="flex-container">
  <div class="flex-item">Centered Item</div>
</div>

Output :

CSS Flex Container Properties

Property	Description
display	Defines an element as a flex container (flex or inline-flex).
flex-direction	Sets the direction of items (row, column, reverse).
flex-wrap	Controls whether items wrap onto new lines.
flex-flow	Shorthand for flex-direction + flex-wrap.
justify-content	Aligns items on the main axis (horizontal by default).
align-items	Aligns items on the cross axis (vertical by default).
align-content	Aligns multiple flex lines within the container.