What is Flexbox and how do you center content with it?

Question

Accepted Answer

**Flexbox** is a one-dimensional layout system — it arranges items in a single **row** or **column** and distributes space along that line. It's the modern answer to alignment and spacing problems that used to require floats and hacks.

```css
.container {
  display: flex;              /* turn on flex; children become flex items */
  flex-direction: row;       /* main axis: row (default) or column */
  gap: 1rem;                 /* space BETWEEN items (no margin hacks) */
}
```

## The two axes

Flexbox has a **main axis** (the direction items flow) and a **cross axis** (perpendicular). The properties map to them:

```css
.container {
  justify-content: center; /* aligns along the MAIN axis */
  align-items: center;     /* aligns along the CROSS axis */
}
```

## Perfect centering — the famous use case

```css
.center {
  display: flex;
  justify-content: center; /* horizontal (main axis = row) */
  align-items: center;     /* vertical (cross axis) */
  min-height: 100vh;
}
```

Those three lines center a child both horizontally and vertically — a task that was notoriously hard before Flexbox.

## Common patterns

```css
/* push items apart: logo left, menu right */
.navbar { display: flex; justify-content: space-between; align-items: center; }

/* wrap to new lines when items don't fit */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
```

`justify-content` options include `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## Why it matters

Flexbox is the everyday tool for navbars, button groups, card rows, centering, and any "line of items" layout.

Understanding the main/cross axis model (and that `justify-content`/`align-items` swap meaning when you change `flex-direction`) is the key mental model.

Use Flexbox for 1D layouts and Grid for 2D.