CSS Flex Container

The Flexbox intro turned parents into containers. This lesson stays on the container: choose the main axis, distribute space, align on the cross axis, and wrap lines. Item growth (flex-grow, flex-basis) waits for Flex Items.

A flex container toolkit

📊 Flex container at a glance

Property	Everyday job
`flex-direction`	Sets main axis: `row`, `column`, or reverse variants
`justify-content`	Distributes items along the main axis
`align-items`	Aligns items on the cross axis (one line)
`flex-wrap`	Allows items to wrap onto new lines
`align-content`	Packs multiple flex lines on the cross axis
`gap`	Spaces items (and lines) without margin fights

Remember: justify rides the main axis; align rides the cross axis. Swap flex-direction to column and those roles rotate with the axes.

flex-direction — pick the main axis

Default is row. Use column for vertical stacks like side navs or form groups. Reverse variants flip visual order — check reading order stays sensible.

Column flex container

css

.stack {
display: flex;
flex-direction: column;
gap: 0.75rem;
}

justify-content — main-axis distribution

Space free room along the main axis: flex-start, center, flex-end, space-between, space-around, space-evenly. Headers often want space-between.

Justify variants

css

.bar {
display: flex;
justify-content: space-around;
align-items: center;
gap: 0.5rem;
}

align-items — cross-axis alignment

On a single line, align-items controls height/vertical placement in a row (or horizontal placement in a column). stretch is the default; center is everyday UI glue.

Align items center

css

.card-row {
display: flex;
align-items: center;
gap: 1rem;
min-height: 6rem;
}

Wrap and align-content

With flex-wrap: wrap, extra items form new lines. align-content packs those lines when there is free cross-axis space — it does little if wrap is nowrap.

Wrapped lines pack

css

.chip-board {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 0.5rem;
min-height: 8rem;
}

A calm container habit

Set direction first, then justify, then align-items, then wrap if needed. Keep gap for gutters. Save per-item growth for the next lesson — and leave 2D page grids to CSS Grid later.

Named container roles

css

.panel {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1rem;
}

Try it yourself

Build a .stack with flex-direction: column and three blocks.
Compare justify-content: space-between vs center on a wide bar.
Raise min-height and try align-items: stretch vs center.
Wrap chips and peek at align-content: flex-start.
Write one sentence: which properties belong on items next, not the container?

Common mistakes

Swapping justify and align mentally after changing direction
Using row-reverse without checking keyboard/reading order
Expecting align-content to matter with nowrap
Putting flex-grow on the container instead of an item
Asking Flexbox container props to build full 2D Grid layouts

Summary

Container props steer direction, distribution, alignment, and wrapping
flex-direction defines the main axis
justify-content vs align-items follow main vs cross
Wrap enables multi-line packs; align-content packs those lines
Item-level growth waits for the Flex Items lesson

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓

Questions

🎯

70%

To Pass

♾️

∞

Time

🔄

∞

Attempts

📝 Instructions

Read each question carefully
Select the best answer for each question
You can retake the quiz as many times as you want
Your progress will be shown at the top

Language