Layout with Flexbox

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model that makes it easy to align, distribute, and space elements within a container. Before Flexbox, developers relied on floats, tables, and positioning hacks to create layouts. Flexbox replaced all of that with a clean, intuitive system.

---

What Is Flexbox?

Flexbox works on two axes:

• Main axis — the primary direction items flow (default: horizontal, left to right)
• Cross axis — perpendicular to the main axis (default: vertical, top to bottom)

Main Axis (default: horizontal) →
┌──────────────────────────────────────────┐
│  ┌──────┐  ┌──────┐  ┌──────┐  ┌──────┐ │  ↑
│  │ Item │  │ Item │  │ Item │  │ Item │ │  │ Cross Axis
│  │  1   │  │  2   │  │  3   │  │  4   │ │  │ (default: vertical)
│  └──────┘  └──────┘  └──────┘  └──────┘ │  ↓
└──────────────────────────────────────────┘

---

Enabling Flexbox

Apply display: flex to a container element. Its direct children become flex items:

.container {
  display: flex;
}

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

By default, flex items sit side by side on a single line.

---

Container Properties