flexbox — the modern layout system

display: flex turns a parent into a flex container. justify-content and align-items control alignment.

style.css v3.1

style.css — the CSS rules

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: #f5f5f5;
  padding: 20px;
  min-height: 120px;
}
.box {
  background: #a0c000;
  color: white;
  padding: 15px;
  border-radius: 6px;
}

index.html — the HTML structure (what the CSS targets)

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

Live preview updates as you type

🧠 How it works

display: flex on the PARENT makes children flex items. justify-content: main-axis alignment (left-right by default). flex-start (default) | center | flex-end | space-between | space-around. align-items: cross-axis alignment (top-bottom by default). stretch (default) | center | flex-start | flex-end. gap: space between items. flex-direction: row (default) | column — changes which axis is main vs cross.

✏️ Try these changes

Change justify-content: center to space-between
→ boxes spread to edges with space between
Change to space-around
→ equal space AROUND each box (smaller gaps at edges)
Change to flex-end
→ boxes push to the right
Change align-items: center to flex-start
→ boxes stick to the top
Add flex-direction: column;
→ boxes stack vertically — main axis is now top-to-bottom
Change gap: 10px to gap: 30px
→ more space between boxes

← Previous lab

position — static, relative, absolute, fixed

Next lab →

grid — 2D layouts