Main axis
The main axis is the primary direction in which a flex container arranges and distributes its flex items.
Web Design Playground, Second Edition
The main axis is the primary direction in which a flex container arranges its flex items.
- How it is used
- Uses the main axis to choose how flex items line up before arranging them with Flexbox properties.
- How deep it goes
- Defines the axis, maps it to flex-direction values, and applies horizontal and vertical nesting in a page layout.
- Examples
- Demonstrates rows and reversed rows, then a Holy Grail page with stacked sections and side-by-side header, navigation, and columns.
- What you can do after
- Apply it via Flexbox properties to stack elements vertically or arrange them horizontally in a page layout.
Read how Web Design Playground, Second Edition explains main axis →
CSS in Depth, Second Edition
The main axis is the primary direction in which a flex container lays out and distributes its flex items.
- How it is used
- Explains how flexbox places, sizes, spaces, and wraps items along their primary layout direction.
- How deep it goes
- Defines the axis, follows its rotation through flex-direction, and explains sizing, spacing, wrapping, and height constraints.
- Examples
- Uses navigation, tiles, a nested sidebar column, axis diagrams, and spacing and wrapping property examples.
- What you can do after
- Apply via CSS Flexbox to choose flow direction, predict sizing dimensions, distribute space, and diagnose constrained column layouts.
Web Design Playground
The primary flexbox axis running top to bottom along which flex items are arranged when the container is vertical.
- How it is used
- Uses the main axis to choose item direction and guide flexbox alignment decisions.
- How deep it goes
- Defines both axes and maps `flex-direction` values to horizontal or vertical item flow.
- Examples
- Uses a vertically stacked `body` in Holy-Grail and photo-gallery page layouts.
- What you can do after
- Apply it via CSS Flexbox to stack page regions vertically and arrange them from the top.
Related concepts
- justify-contentused by · The CSS justify-content property distributes flex items or grid tracks along the relevant container axis when free space is available.
- cross axiscontrasts with · The layout axis perpendicular to a flex container's main axis, along which items can be aligned.
- flex-directionconfigured by · The CSS flex-direction property specifies the main-axis direction and ordering in which flex items are laid out within a flex container.
- flex itemhas part · A flex item is a child of a flex container that participates in its flexible layout.
- flexboxused by · Flexbox is a CSS one-dimensional layout model for arranging, sizing, aligning, and distributing items along a row or column.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.