To use Flexbox, you must first understand two important parts: the flex container and the flex items.
The flex container is the parent element that holds all the flex items.
The flex items are the direct children inside the container.
Once you set display flex on a container, all its children automatically become flex items.
In this example, the div with class container is the flex container.
Each div with class item is a flex item.
They are placed in a row automatically because Flexbox uses row direction by default.
Here, the flex container uses flex-direction column.
This changes the layout from horizontal to vertical without changing any HTML.
This is a real-world example of flex container and items.
The card is the flex container.
The avatar and info section are flex items.
Flexbox makes it easy to align them neatly in one row.
Important things to remember
- display flex turns an element into a flex container
- Only direct children become flex items
- Flexbox works best for one-dimensional layouts
Toolbars, menus, and action panels are commonly built using flex containers and flex items.
Practice task
Create a flex container and:
- Add three boxes inside it
- Change flex-direction from row to column
- Try aligning items using align-items
Next lesson
In the next page, you will learn about flex-direction and how it changes layout direction.