Align-content
The CSS align-content property distributes flex lines or grid tracks along a container’s cross or block axis when free space is available.
Web Design Playground, Second Edition
The CSS align-content property controls the distribution of flex lines or grid tracks along the cross axis of a container.
- How it is used
- Arranges wrapped flex lines along a container’s cross axis as part of choosing Flexbox container behavior.
- How deep it goes
- Defines seven values and their visible spacing effects, without descending into browser layout internals.
- Examples
- Uses a fixed container’s wrapped lines and a photo-gallery thumbnail layout with a growing main element.
- What you can do after
- Apply it via CSS to keep wrapped flex lines positioned or evenly spaced across available cross-axis space.
Read how Web Design Playground, Second Edition explains align-content →
Web Design Playground
A CSS property that aligns flex lines or wrapped content within a flex container on the cross axis when extra space is available.
- How it is used
- Arranges multiple wrapped flex lines along a container’s cross axis.
- How deep it goes
- Defines six values and their visible line-placement effects, without detailing underlying layout mechanics.
- Examples
- Uses figures and an interactive Playground to compare align-content values on horizontal main-axis containers.
- What you can do after
- Apply it via CSS to position or distribute wrapped flex lines on the cross axis.
CSS in Depth, Second Edition
The CSS align-content property distributes grid tracks or flex lines along the container's block or cross axis when free space is available.
- How it is used
- Controls how wrapped flex lines or underfilled grid tracks occupy available space inside a container.
- How deep it goes
- Explains the property through flex and grid behavior, supported values, free-space calculations, and a concrete grid example.
- Examples
- Uses a 1200px grid containing four 200px rows to demonstrate distribution of 400px of unused space.
- What you can do after
- Apply it via CSS to position, stretch, or distribute wrapped flex lines and grid tracks within available container space.
Read how CSS in Depth, Second Edition explains align-content →
Related concepts
- flex containerconfigures · A flex container is an element whose children are laid out as flex items according to the CSS Flexible Box Layout model.
- flex-startconfigured by · Flex-start is a CSS alignment keyword that positions flex items toward the start edge of the relevant flex container axis.
- flexboxconfigures · Flexbox is a CSS one-dimensional layout model for arranging, sizing, aligning, and distributing items along a row or column.
- place-contentequivalent to · The CSS place-content shorthand property sets how content is aligned and distributed along a container’s axes.
- grid containerconfigures · A grid container is an element whose display mode establishes a CSS Grid formatting context for laying out its child elements as grid items.
- mainconfigures · The HTML main element identifies the dominant content of a document or application view, excluding shared navigation and peripheral content.
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.