Flexbox — One-Dimensional Layout

If you have used Auto Layout in Figma, you already understand Flexbox. They work on exactly the same idea: a parent container controls how its children are arranged along one axis. You set rules on the parent, and the children obey.

The only difference is the syntax. Let us map what you already know to what CSS calls it.

The Figma → CSS translation

Figma Auto Layout setting	CSS Flexbox property
Direction: Horizontal	flex-direction: row (default)
Direction: Vertical	flex-direction: column
Alignment: Left/Top	justify-content: flex-start
Alignment: Center	justify-content: center
Alignment: Right/Bottom	justify-content: flex-end
Alignment: Space between	justify-content: space-between
Cross-axis alignment: Center	align-items: center
Gap (spacing between items)	gap: 1rem
Wrap items	flex-wrap: wrap

The essential properties

display: flex — This activates Flexbox on the parent. Nothing else changes until you add this one line.

flex-direction — Which way do the children flow?

• row — left to right (the default)
• column — top to bottom

justify-content — How are children distributed along the main axis (the direction they flow)?

• flex-start / flex-end / center / space-between / space-around / space-evenly

align-items — How are children aligned on the cross axis (perpendicular to the flow)?

• flex-start / flex-end / center / stretch

gap — Consistent spacing between items. No more margin hacks. This is the same as the gap value in Figma Auto Layout.

flex-wrap — Should items wrap to the next line when there is not enough space?

• nowrap (default, items shrink to fit) / wrap (items wrap to a new row)

Edit a row of cards

Below is a navigation bar with three links. Try changing the properties in the CSS panel to see how Flexbox responds.

HTMLCSS

<nav class="nav"> <span class="logo">MyBrand</span> <div class="links"> <a class="link" href="#">Home</a> <a class="link" href="#">Work</a> <a class="link" href="#">About</a> <a class="link" href="#">Contact</a> </div> </nav> <div class="cards"> <div class="card">Card 1</div> <div class="card">Card 2</div> <div class="card">Card 3</div> </div>

Things to try:

• Change .cards justify-content to center or space-between
• Change .cards flex-direction to column
• Add align-items: center to .nav (it already has it — try removing it)
• Change the .cards gap to 0.25rem or 3rem

💡 justify-content vs align-items — the trick to remembering

justify-content always works along the direction items are flowing (main axis). align-items always works perpendicular to that direction (cross axis). In Figma terms: if your auto-layout is horizontal, justify-content is horizontal alignment and align-items is vertical alignment. Flip the direction and both flip with it.

Which CSS property is the direct equivalent of Figma Auto Layout gap?

margin padding gap spacing

You want items in a flex container to be centered vertically. Which property do you use?

justify-content: center align-items: center flex-direction: center text-align: center

What does flex-wrap: wrap do?

Makes all items the same width Prevents items from overflowing by wrapping to the next line Wraps text inside each item Reverses the flex direction

To distribute three items with equal space between them (but not outside), you use:

justify-content: space-around justify-content: space-evenly justify-content: space-between align-items: space-between

Submit

Mark as complete