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