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

These properties are set on the flex container (the parent):

flex-direction

Controls the main axis direction:

Value	Direction
row	Left to right (default)
row-reverse	Right to left
column	Top to bottom
column-reverse	Bottom to top

.container {
  display: flex;
  flex-direction: column;
}

flex-wrap

Controls whether items wrap to new lines:

Value	Behaviour
nowrap	All items on one line (default)
wrap	Items wrap to the next line
wrap-reverse	Items wrap in reverse order

.container {
  display: flex;
  flex-wrap: wrap;
}

justify-content

Aligns items along the main axis:

Value	Effect
flex-start	Pack items at the start (default)
flex-end	Pack items at the end
center	Centre items
space-between	Equal space between items, none at edges
space-around	Equal space around each item
space-evenly	Equal space between and at edges

.container {
  display: flex;
  justify-content: space-between;
}

align-items

Aligns items along the cross axis:

Value	Effect
stretch	Items stretch to fill the container (default)
flex-start	Align to the start of the cross axis
flex-end	Align to the end of the cross axis
center	Centre along the cross axis
baseline	Align by text baseline

.container {
  display: flex;
  align-items: center;
  height: 300px;
}

align-content

Controls the spacing of wrapped lines (only works with flex-wrap: wrap):

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

gap

Adds space between flex items (without margins):