vibecodai logovibecodai
← All CSS lessons

CSS · Lesson 4 · 12 min

Flexbox Intro

Line up items in a row or column with flex.

You will learn

  • Use display: flex
  • Align items with gap
  • Center content easily

Flexbox is perfect for nav bars, button rows, and centering. display: flex on a parent lines up its children.

Edit CSS — live preview below

HTML context (read-only)
<nav class="bar">
  <span>Home</span>
  <span>Quests</span>
  <span>Profile</span>
</nav>
CSS
Live preview

Tip: Try justify-content: space-between.