CSS: CSS Flexbox Container
Last updated: 2026-10-13
Flexbox is a powerful one-dimensional layout method that makes it easy to align, distribute, and order elements within a container.
1. Flex Container Properties
(1) Quick Reference
| Property | Values | Purpose |
|---|---|---|
display: flex |
— | Creates flex container |
flex-direction |
row, row-reverse, column, column-reverse |
Main axis direction |
flex-wrap |
nowrap, wrap, wrap-reverse |
Whether items wrap |
justify-content |
flex-start, flex-end, center, space-between, space-around, space-evenly |
Main axis alignment |
align-items |
flex-start, flex-end, center, stretch, baseline |
Cross axis alignment |
align-content |
flex-start, flex-end, center, space-between, space-around, stretch |
Multi-line cross axis |
gap |
10px, 10px 20px |
Space between items |
2. flex-direction
Controls the main axis direction:
▶ Example
▶ Try it Yourself3. justify-content
Aligns items along the main axis:
▶ Example
▶ Try it YourselfCommon values:
flex-start: Items at start (default)flex-end: Items at endcenter: Items centeredspace-between: Equal space between itemsspace-around: Equal space around itemsspace-evenly: Equal space between and around
4. align-items
Aligns items along the cross axis:
▶ Example
▶ Try it Yourself5. flex-wrap
Controls whether items wrap to new lines:
▶ Example
▶ Try it Yourself6. gap
Sets spacing between flex items:
▶ Example
▶ Try it Yourself❓ FAQ
Q Does justify-content change direction when flex-direction is column?
A Yes.
justify-content always works along the main axis. When flex-direction: row, main axis is horizontal; when column, main axis becomes vertical. Remember: justify-content controls main axis, align-items controls cross axis.Q When should I use flex-wrap?
A When items don't fit in one line. Default (
nowrap) compresses items; wrap lets them flow to next line. Essential for responsive layouts where items should stack on smaller screens.Q What's the difference between align-items and align-content?
A
align-items controls single-line item alignment (within each line). align-content controls multi-line space distribution (only works with multiple lines). Single-line: align-content is ignored.📖 Summary
- Flexbox container properties control "overall" behavior — how items arrange, wrap, and align
- Remember:
justify-contentcontrols main axis,align-itemscontrols cross axis - If
flex-directionchanges, these two swap their effective directions
📝 Exercises
Basic
- Create a flex container with 5 items. Try all four
flex-directionvalues to observe direction changes. - Demonstrate all 6
justify-contentvalues with screenshots for comparison.
Intermediate
- Set
flex-wrap: wrapand observe multi-line alignment with differentalign-contentvalues. - Compare
gapproperty withmarginfor spacing — appreciate gap's convenience.
Challenge
- Create a responsive navbar: desktop has logo left, menu right; mobile has logo left, hamburger right, menu hidden.
- Create a card list with
justify-content: space-betweenfor even distribution, last row left-aligned.
