HTML & CSS · Flexbox · Lesson 10 of 25

Introducing Flexbox

Concept

Introducing Flexbox

Setting display: flex turns a container's children into a flexible row, or column, that is easy to align and space.

Once a container is flex, its direct children become "flex items" that automatically arrange themselves in a row by default, without needing floats or manual positioning.

By the end of this lesson

Explain the core idea behind Introducing Flexbox.
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 {
  display: flex;
  gap: 12px;
}

ExampleRunnable

.row {
  display: flex;
  gap: 12px;
}

Try it Yourself »

Letting an item grow to fill space

.sidebar { flex: 0 0 200px; }
.main { flex: 1; }

Note: flex: 1 tells an item to grow and take up any remaining space, which is how flexible sidebar/main layouts are built.

Self-check before continuing

Without looking at the example, describe what changes when you modify one input in Introducing Flexbox. 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

Put three boxes in a flex row with a 16px gap between them.

Loading editor…

Console

Output will appear here...