What is a flex container?

Learn the flexible container with display: flex.

What is Flexbox?

Flexbox is the modern way to lay items out along a row or a column. Two roles sit at its core: the flex container and the flex item. A container aligns the elements it holds, either horizontally or vertically.

You set the container up first: pick an HTML element and make it flexible in CSS. From that point on, every child inside it becomes part of the flex layout.

What does display: flex do?

To turn an element into a flex container you write display: flex. That single line changes the inner behavior of the container: its children no longer sit in normal flow, they sit in flex layout. By default they line up side by side, left to right.

No Flexbox feature works until you add display: flex; that is why every Flexbox section starts with this declaration.

What is a flex item?

The direct children of a container become flex items; grandchildren are not part of this layout. If a ul is the container, the li elements inside are flex items; an a nested inside an li is not.

Each flex item sits along the container's axes and is ordered by the direction declaration you will meet in the next lesson. Extra size settings arrive in later lessons too.

Exercise Make the toolbar flexible

Add a .toolbar class selector and write the display: flex declaration. The toolbar buttons will then line up side by side.

Show example solution

/* make the toolbar flexible */
.toolbar {
  display: flex;
}

Test yourself

What does display: flex do?
```
.toolbar {
  display: flex;
}
```
- It puts the children into flex layout
- It only aligns text horizontally
- It changes the page background
- It hides HTML tags
Show answer

It puts the children into flex layout — Correct. display: flex puts the container's children into flex layout.

Write the flex container declaration

.toolbar {
  ____;
  gap: 0.5rem;
}

Show answer

.toolbar {
  display: flex;
  gap: 0.5rem;
}

Match each term to its meaning

Flex container

The flexible container
Flex item

The flexible item
display: flex

Makes the container flexible

Next lesson: Flex-direction

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies