← Reference notes

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

For language models and agents: start at /llms.txt. This page in Markdown: /library/reference/mdn/css-flexbox-basics.md.