---
title: "CSS Flexbox"
slug: "css-flexbox"
category: "glossary"
tags: ["glossary", "frontend", "css", "layout", "flexbox", "responsive-design"]
status: "stable"
last_updated: 2026-05-14
summary: "CSS Flexbox is a one-dimensional layout model that distributes space along a single axis, suited for navbars, button groups, and centered content."
related:
  [
    "[[frontend/css]]",
    "[[frontend/tailwind]]",
    "[[glossary/css-grid]]",
    "[[glossary/viewport]]",
    "[[frontend/html]]",
    "[[frontend/react]]",
  ]
---

## Overview

This page is the atomic definition. Full CSS layout guidance lives at [[frontend/css]].

## Definition

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model controlled by `display: flex` on a container. Items are distributed along the main axis (row or column) using `justify-content` and along the cross axis using `align-items`. Key properties: `flex-grow` controls how items expand to fill remaining space; `flex-shrink` controls contraction; `flex-basis` sets the initial size before distribution. `flex-wrap: wrap` allows items to wrap to new lines, creating a multi-line layout that still treats each line independently (unlike Grid, which tracks both axes). Flexbox is ideal for navigation bars, toolbars, card footers with space-between, and centering content both vertically and horizontally inside a container. For two-dimensional layouts where row and column alignment must stay synchronized, use [[glossary/css-grid]].

## When it applies

Use Flexbox whenever you need to distribute items along a single axis, center content, or push items to opposing ends with `space-between`. Use Grid when layout requires alignment across both rows and columns at the same time.

## Example

```css
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  height: 56px;
}
```

## Related concepts

- [[frontend/css]] - the full CSS layout and specificity guide.
- [[glossary/css-grid]] - the two-dimensional complement to Flexbox.
- [[glossary/viewport]] - use viewport units with flex containers for full-height layouts.
- [[frontend/tailwind]] - Tailwind exposes Flexbox via `flex`, `items-*`, `justify-*` utilities.

## Citing this term

> See [[glossary/css-flexbox|CSS Flexbox]] (llmbestpractices.com/glossary/css-flexbox).

## Related

- [[frontend/css]]
- [[frontend/tailwind]]
- [[glossary/css-grid]]
- [[glossary/viewport]]
- [[frontend/html]]