Container
The element with display: flex. It creates the flex formatting context.
Platform under construction
Flexbox
Flexbox is a one-dimensional layout system. It arranges items along a main axis and can align, wrap and distribute space with very little CSS.
.actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
Layout
Flexbox is for arranging items in one direction.
When you set display: flex on a container, its direct children become flex items. The container controls the axis, spacing and alignment.
Flexbox is ideal for navigation, button rows, toolbars, cards in a row, media objects and any layout where one dimension matters most.
The mental model is axis first. flex-direction decides the main axis, justify-content works along that main axis and align-items works across it.
Items
The direct children that are arranged by flexbox.
Main axis
The direction items flow: row, row-reverse, column or column-reverse.
Cross axis
The perpendicular direction used by align-items and align-content.
Visual model
Layout is easier when you can name the relationship.
Good layout CSS is not a pile of positions. It is a set of relationships: flow, axis, tracks, placement, layering, sticking and rhythm.
flex
Create a flex container.
row
Choose the main axis.
1rem
Set spacing between items.
wrap
Allow items to continue on another line.
Examples
Use the layout tool that matches the shape of the problem.
Flex used for a row of actions
.actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
}
Row layout with manual margins
.button { display: inline-block; margin-right: 17px; }
.button:last-child { margin-right: 0; }
.actions { white-space: nowrap; }
Rules that matter
Strong layout CSS stays readable when the screen changes.
Layout work is where real content, real devices and real users expose weak assumptions. The goal is a structure that explains itself in code and survives change.
Use flex for one axis
If items mainly flow in a row or column, flexbox is usually a good fit.
Think container first
Most flex behavior is controlled by the parent.
Use gap, not margin hacks
gap is simpler and works for wrapping rows.
Allow wrapping when needed
flex-wrap prevents row layouts from breaking on narrow screens.
Understand flex shorthand
flex: 1 means grow, shrink and basis decisions at once.
Do not force grids with flex
If rows and columns both matter, CSS Grid may be cleaner.
Production thinking
Layout quality shows up when content stops being perfect.
Why does this matter?
Flexbox makes common interface rows simple and durable. It replaces many old float, inline-block and margin hacks.
Accessibility
Flexbox can visually reorder items. Keep keyboard and reading order sensible.
Production note
Use flex for navigation, toolbars, action rows and small component alignment. Do not use it as a universal layout hammer.
SEO note
Flexbox does not change content meaning, but readable source order still matters for crawlers and users.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Change flex-wrap to nowrap and imagine a narrow mobile screen.
- Change flex-direction to column and describe the new main axis.
- Replace gap with margins and see how much more code is needed.
Practice assignment
Do this before moving to the next lesson.
- Create a toolbar with three links or buttons.
- Use display flex, gap and flex-wrap.
- Explain what the main axis and cross axis are.
Try it yourself
Build a flexible action row
Self-check
Before you continue, prove that you understand Flexbox.
Answer these questions before moving on. If the answer is vague, change the lab layout and inspect the result.
- Can you explain why flexbox is one-dimensional?
- Can you identify the flex container and flex items?
- Can you use gap for item spacing?
- Can you choose between flex-direction row and column?
- Can you decide when grid would be a better tool?
Senior audit upgrade
Always identify the main axis first.
Most flexbox confusion comes from forgetting that justify-content follows the main axis, while align-items crosses it.
Row
Main axis is horizontal in typical left-to-right writing.
Column
Main axis becomes vertical, so justify-content now works vertically.
Grid comparison
If both rows and columns matter equally, CSS Grid may be the cleaner layout tool.