Cross axis
The layout axis perpendicular to a flex container's main axis, along which items can be aligned.
CSS in Depth, Second Edition
The cross axis is the layout direction perpendicular to a flex container's main axis.
- How it is used
- Guides alignment decisions by identifying the direction perpendicular to a flex container’s item flow.
- How deep it goes
- Defines the axis, follows its rotation in a column layout, and distinguishes item alignment from spacing wrapped rows.
- Examples
- Uses a flex-container diagram and a nested column sidebar whose tiles grow vertically.
- What you can do after
- Operate/configure CSS flexbox alignment by choosing controls for items or wrapped rows after identifying the cross axis.
Web Design Playground, Second Edition
The cross axis is the direction perpendicular to the main axis in a flex container.
- How it is used
- Uses cross-axis alignment to position flex items and wrapped lines while building page layouts.
- How deep it goes
- Defines the perpendicular axis, relates it to flex-direction, and demonstrates alignment in a header layout.
- Examples
- Demonstrates a header logo and title centered on the vertical cross axis within a horizontal flex container.
- What you can do after
- Apply it via CSS Flexbox properties to align items across a container’s main direction.
Read how Web Design Playground, Second Edition explains cross axis →
Web Design Playground
The axis perpendicular to the main axis in a flex container along which items can be aligned.
- How it is used
- Guides how flex items are arranged across a flex container’s secondary direction.
- How deep it goes
- Defines the perpendicular axis and connects it to flex-direction and alignment choices.
- Examples
- Uses header and div flex containers plus row and column direction rules.
- What you can do after
- Operate/configure it by selecting cross-axis alignment with align-items in a flex container.
Related concepts
- align-itemsused by · The CSS align-items property specifies how items are aligned along a container’s cross axis in flexbox and grid layouts.
- main axiscontrasts with · The main axis is the primary direction in which a flex container arranges and distributes its flex items.
- 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.
- 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.