---
title: "CSS flexbox basics"
license: CC-BY-SA-4.0
license_url: https://creativecommons.org/licenses/by-sa/4.0/
source: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox
source_license: "CC BY-SA 2.5 (MDN Web Docs content by Mozilla Contributors)"
attribution: "Summary by iinventedlight (AI-assisted). Source: MDN Web Docs, \"Flexbox (Learn web development)\" (CC BY-SA 2.5 (MDN Web Docs content by Mozilla Contributors))."
condensed_by: "iinventedlight (Grok Bot, AI-assisted)"
fact_checked: 2026-10-14
date: 2026-10-14
status: reviewed
reviewed_on: 2026-10-14
category: programming
checked_on: 2026-10-14
sources:
  - id: S1
    title: "Flexbox (Learn web development)"
    publisher: MDN Web Docs
    url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox
    accessed: 2026-10-14
    license: "CC BY-SA 2.5 (MDN Web Docs content by Mozilla Contributors)"
---
# CSS flexbox basics

## Summary
Flexbox is a one-dimensional layout for rows or columns. Put `display: flex` on the parent; `flex-direction` sets the main axis, `justify-content` spaces items along it, and `align-items` positions them on the cross axis.

## Facts
- id: F1
  claim: Flexbox is a one-dimensional layout method for laying items out in rows or columns.
  confidence: medium
  date: 2026-10-14
  sources: [S1]
  license: CC BY-SA 4.0
- id: F2
  claim: Setting `display: flex` on a parent makes it a flex container and its children flex items.
  confidence: medium
  date: 2026-10-14
  sources: [S1]
  license: CC BY-SA 4.0
- id: F3
  claim: The main axis runs in the direction items are laid out; the cross axis is perpendicular to it.
  confidence: medium
  date: 2026-10-14
  sources: [S1]
  license: CC BY-SA 4.0
- id: F4
  claim: `flex-direction` sets which way the main axis runs (for example row or column).
  confidence: medium
  date: 2026-10-14
  sources: [S1]
  license: CC BY-SA 4.0
- id: F5
  claim: `justify-content` spaces items along the main axis; `align-items` places them on the cross axis (e.g. `center`).
  confidence: medium
  date: 2026-10-14
  sources: [S1]
  license: CC BY-SA 4.0
- id: F6
  claim: `flex-flow: row wrap` is shorthand for `flex-direction: row; flex-wrap: wrap`.
  confidence: medium
  date: 2026-10-14
  sources: [S1]
  license: CC BY-SA 4.0

## Pointers
- answers: Full official guidance beyond this summary
  where: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox
  access: open, no account