Flex Container Properties: Direction and Wrap

If you’ve ever struggled to line things up neatly on a web page—like buttons in a row or product cards in a grid—Flexbox is here to save you time and stress.

In this article, you’ll learn two core Flexbox superpowers:

flex-direction – which controls which way your items line up
flex-wrap – which controls whether items stay on one line or wrap to the next

We’ll walk through this step by step, with simple examples you can copy, paste, and tweak. No prior coding experience is required.

What is a Flex Container?

To use Flexbox, you first need a flex container.

A container is just an HTML element (like a <div>) that holds other elements inside it. When you turn it into a flex container, the browser gains special rules for how to arrange the items inside.

You make a flex container using one CSS line:

.container {
  display: flex; /* Turn this element into a flex container */
}

Once you do this, all direct children of .container become flex items and will follow Flexbox rules.

Getting Set Up (Super Simple)

To follow along, you can:

Open a text editor (Notepad, VS Code, etc.)
Create a file named flex-demo.html
Paste the examples into it
Save and open the file in your browser

Every example in this article will use this basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Flex Direction and Wrap Demo</title>
  <style>
    /* We'll put our CSS here in each example */
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</body>
</html>

We’ll keep changing the CSS inside <style>...</style> to see different layouts.

Step 1: Basic Flex Direction (Row vs Column)

The flex-direction property controls the main direction in which your items are laid out.

It has four main values:

row – left to right (this is the default)
row-reverse – right to left
column – top to bottom
column-reverse – bottom to top

Let’s start with row and column.

Example 1: Row vs Column

Replace the <style> section in your file with this:

body {
  font-family: Arial, sans-serif;
}

.container {
  display: flex;           /* Turn on Flexbox */
  flex-direction: row;     /* Try changing this to column */
  gap: 10px;               /* Space between items */
  border: 2px solid #333;  /* Just to see the container */
  padding: 10px;
}

.item {
  background: lightblue;
  padding: 10px 20px;
  border: 1px solid #0077aa;
}

What you’ll see:

With flex-direction: row; the items 1 2 3 4 5 appear in a horizontal row, left to right.
Change it to flex-direction: column; and refresh. Now they appear in a vertical column, top to bottom.

Try switching between row and column a few times. Notice that you didn’t change the HTML at all—only a single CSS line. That’s one reason Flexbox is so powerful.

Try it yourself: Change the gap value to 30px or 2px and see how the spacing between items changes.

Step 2: Reverse Directions (row-reverse and column-reverse)

Sometimes you want items to appear in the opposite order, without changing the HTML. That’s where row-reverse and column-reverse come in.

Update your CSS:

body {
  font-family: Arial, sans-serif;
}

.container {
  display: flex;
  flex-direction: row-reverse; /* Try column-reverse too */
  gap: 10px;
  border: 2px solid #333;
  padding: 10px;
}

.item {
  background: peachpuff;
  padding: 10px 20px;
  border: 1px solid #cc6600;
}

What you’ll see:

With row-reverse, the items appear in a row from right to left: 5 4 3 2 1.
With column-reverse, they appear in a column from bottom to top (5 at the top if your browser aligns from the top of the container).

This is handy when you need to change visual order quickly, such as for languages that read right-to-left, or for mobile vs desktop layouts.

Try it yourself: Toggle between row, row-reverse, column, and column-reverse. Watch how the same HTML produces very different layouts.

Step 3: What Is flex-wrap (and Why It Matters)?

By default, Flexbox tries to put all items on one line.

If there’s not enough space, they just shrink to fit. Sometimes that’s okay. But if you have many cards or buttons, they may become too small or overflow the container.

flex-wrap tells the browser whether items are allowed to move to a new line.

It has three common values:

nowrap – all items stay on one line (default)
wrap – items move to the next line when they don’t fit
wrap-reverse – like wrap, but new lines are added above instead of below

Step 4: Letting Items Wrap with flex-wrap

Let’s give our items a fixed width so they can’t just shrink forever. Then flex-wrap will have a clear effect.

Update your CSS to this:

body {
  font-family: Arial, sans-serif;
}

.container {
  display: flex;
  flex-direction: row;  /* Items go left-to-right */
  flex-wrap: wrap;      /* Allow items to move to a new line */
  gap: 10px;
  border: 2px solid #333;
  padding: 10px;
  max-width: 300px;     /* Limit container width so wrapping happens */
}

.item {
  background: lightgreen;
  border: 1px solid #2e8b57;
  padding: 10px;
  width: 80px;          /* Fixed width so we can see wrapping */
  text-align: center;
}

What you’ll see:

Because the container has max-width: 300px and each item is 80px wide (plus gaps), not all 5 items fit on one line.
The extra items automatically wrap to the next line, creating multiple rows.

Now change flex-wrap to nowrap and refresh:

flex-wrap: nowrap;

Now the items will try to stay on one line, and may shrink or overflow depending on your browser width.

Try it yourself: Resize your browser window to be narrower and wider. With flex-wrap: wrap;, watch the items jump to new lines when there’s not enough space.

Step 5: Combining Direction and Wrap (Rows vs Columns with Wrapping)

You can mix and match flex-direction and flex-wrap to get different layouts.

Together, they define how items flow in the container:

row + wrap → multiple rows, left to right, then next line below
column + wrap → multiple columns, top to bottom, then next column to the right

Let’s see this in action.

Example 2: Column with Wrap

Use this CSS:

body {
  font-family: Arial, sans-serif;
}

.container {
  display: flex;
  flex-direction: column; /* Items go top-to-bottom first */
  flex-wrap: wrap;        /* Then start a new column */
  gap: 10px;
  border: 2px solid #333;
  padding: 10px;
  height: 200px;          /* Limit height so wrapping happens */
}

.item {
  background: lightcoral;
  border: 1px solid #aa3030;
  padding: 10px;
  height: 50px;           /* Fixed height */
  width: 80px;
  text-align: center;
}

What you’ll see:

Items will stack top to bottom until they run out of height.
Once there’s no space left, the next items begin a new column to the right.

Try it yourself: Increase or decrease the .container height and see how the number of items in each column changes.

Step 6: A Practical Mini Layout Example

Let’s put this into a simple, real-world style layout: a set of "cards" that wrap into rows.

Replace your CSS with this:

body {
  font-family: Arial, sans-serif;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;          /* Cards move to new rows when needed */
  gap: 15px;
  border: 2px solid #333;
  padding: 15px;
  max-width: 500px;         /* Try changing this width */
}

.item {
  background: #f0f0f0;
  border: 1px solid #ccc;
  padding: 15px;
  width: 140px;             /* Card width */
  box-sizing: border-box;   /* Include padding in width */
}

And update your HTML items to look like cards:

<div class="container">
  <div class="item">Card 1: Intro</div>
  <div class="item">Card 2: Features</div>
  <div class="item">Card 3: Pricing</div>
  <div class="item">Card 4: Contact</div>
  <div class="item">Card 5: FAQ</div>
  <div class="item">Card 6: More</div>
</div>

What you’ll see:

A row of cards that wrap onto multiple lines when the container is too narrow.
If you make the browser window narrower, the layout adjusts automatically.

This is the core idea behind many modern responsive card layouts.

Try it yourself: Change flex-direction to column and see how the entire layout feels different. Then switch back to row.

Quick Recap: Key Takeaways

You’ve just learned the two most important Flexbox container properties:

flex-direction controls which way items flow:
- row / row-reverse → horizontal
- column / column-reverse → vertical
flex-wrap controls whether items can use multiple lines:
- nowrap → all on one line
- wrap / wrap-reverse → items move to new rows or columns
You can combine direction and wrap for different layouts:
- row + wrap → multiple rows
- column + wrap → multiple columns

Learning layout can feel tricky at first, so if it didn’t all click right away, that’s normal. The best way to really understand Flexbox is to experiment: change one property at a time, refresh the page, and notice what moved.

Next steps you might explore:

justify-content (how items are spaced along the main direction)
align-items (how items are aligned across the other direction)
Building a full responsive navbar or card grid with Flexbox

For now, you’ve taken an important step: you can control direction and wrapping of flex items, which is the foundation of modern CSS layouts. Keep playing with the examples—you’re on the right track.

Mudzinga

Flex Container Properties: Direction and Wrap

What is a Flex Container?

Getting Set Up (Super Simple)

Step 1: Basic Flex Direction (Row vs Column)

Example 1: Row vs Column

Step 2: Reverse Directions (row-reverse and column-reverse)

Step 3: What Is flex-wrap (and Why It Matters)?

Step 4: Letting Items Wrap with flex-wrap

Step 5: Combining Direction and Wrap (Rows vs Columns with Wrapping)

Example 2: Column with Wrap

Step 6: A Practical Mini Layout Example

Quick Recap: Key Takeaways

About Percy Mudzinga

Related Articles

Flex Container Properties: Direction and Wrap

What is a Flex Container?

Getting Set Up (Super Simple)

Step 1: Basic Flex Direction (Row vs Column)

Example 1: Row vs Column

Step 2: Reverse Directions (row-reverse and column-reverse)

Step 3: What Is flex-wrap (and Why It Matters)?

Step 4: Letting Items Wrap with flex-wrap

Step 5: Combining Direction and Wrap (Rows vs Columns with Wrapping)

Example 2: Column with Wrap

Step 6: A Practical Mini Layout Example

Quick Recap: Key Takeaways

About Percy Mudzinga

Related Articles

Never Miss an Update