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.

<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

Common mistakes designers run into

Forgetting to set flex-wrap, causing the layout to overflow on small screens
Using margin instead of gap, making spacing inconsistent when items are added or removed
Confusing the main axis with the cross axis when flex-direction changes

The developer’s perspective

👨‍💻 What developers actually see

Designers see “Auto Layout, like in Figma,” but developers have to translate every setting (direction, gap, alignment) into its own property, and test it with different content lengths too.

💡 Real-world example

Figma’s Auto Layout maps onto Flexbox more directly than any other CSS layout method, which is why Flexbox tends to be the first tool developers reach for once a design uses Auto Layout.