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.
- 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.
- 1. Read one concept.
- 2. Change the example.
- 3. Run, compare, and explain.
- 4. Complete the challenge below.
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.
Ask about this lesson or your next move. The guide explains the path without taking the work away from you.
Ready for the next lesson?
Mark this lesson complete when you have finished the exercise.
Console