HTML & CSS · Flexbox · Lesson 12 of 25

flex-direction and Wrapping

Concept

flex-direction and Wrapping

flex-direction: column stacks items vertically, and flex-wrap lets items move to a new line instead of overflowing.

By default flex-wrap is nowrap, which shrinks items to fit on one line — setting it to wrap instead lets extra items flow onto new rows, which is essential for responsive card grids.

By the end of this lesson

Explain the core idea behind flex-direction and Wrapping.
Predict output before running a change.
Test one realistic and one unusual input.
Use the result to make the next decision.

How to study this page

1. Read one concept.
2. Change the example.
3. Run, compare, and explain.
4. Complete the challenge below.

Syntax

.selector {
  flex-direction: row | column;
  flex-wrap: nowrap | wrap;
}

ExampleRunnable

.row {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

Try it Yourself »

The flex-flow shorthand

.row {
  display: flex;
  flex-flow: row wrap;
}

Note: flex-flow combines flex-direction and flex-wrap into one property.

Self-check before continuing

Without looking at the example, describe what changes when you modify one input in flex-direction and Wrapping. Then reopen the editor and prove your explanation with a small test.

You are ready to continue when you can predict, test, and explain the result.

Your turn

Build a flex container that switches from a row to a column layout.

Loading editor…

Console

Output will appear here...