Align-items
The CSS align-items property specifies how items are aligned along a container’s cross axis in flexbox and grid layouts.
Web Design Playground, Second Edition
The CSS align-items property sets the default alignment of flex items along the cross axis of a flex container.
- How it is used
- Controls default cross-axis placement of flex items when arranging Flexbox containers.
- How deep it goes
- Defines five values and demonstrates centering and default stretching, without detailing layout internals.
- Examples
- Uses a centered browser-window heading, gallery headers and navigation, and a full-height sidebar.
- What you can do after
- Apply it via Flexbox to center items, edge-align them, align text baselines, or stretch items across a container.
Read how Web Design Playground, Second Edition explains align-items →
Tiny CSS Projects
The CSS align-items property controls the alignment of grid or flex items along the relevant cross axis.
- How it is used
- Positions items within flex and grid layouts, particularly when centering card content or aligning items of different heights.
- How deep it goes
- Works through CSS declarations in several layouts and explains stretch versus flex-start, without exploring browser layout internals.
- Examples
- Uses a centered profile card, a grid-based summary card, a credit-card security-code band, and an icon-and-text button.
- What you can do after
- Operate/configure it to center content, align flex items at their tops, or avoid unwanted stretching.
Web Design Playground
A CSS alignment property that aligns items within a flex container or grid container along the cross axis.
- How it is used
- Positions flex items across a container’s cross axis after their main-axis arrangement is chosen.
- How deep it goes
- Defines five values and their visible effects, without detailing lower-level layout mechanics.
- Examples
- Uses a centered h1, a vertically centered portfolio header, and equal-height article and aside columns.
- What you can do after
- Apply it via CSS Flexbox to center, edge-align, baseline-align, or stretch items across the cross axis.
CSS in Depth, Second Edition
The CSS align-items property specifies the default cross-axis alignment of items within a flex or grid container.
- How it is used
- Aligns flex or grid items along the cross axis when building navigation, pricing components, and other interface layouts.
- How deep it goes
- Defines the cross-axis rule, common values, writing-mode behavior, baselines, and item-level overrides through concrete layouts.
- Examples
- Demonstrates equal-height flex columns, a stylized $20.00 price, bottom-aligned navigation links, and grid alignment properties.
- What you can do after
- Apply cross-axis alignment to flex and grid layouts, then override one flex item with align-self when needed.
Read how CSS in Depth, Second Edition explains align-items →
Related concepts
- cross axisuses · The layout axis perpendicular to a flex container's main axis, along which items can be aligned.
- flexboxconfigures · Flexbox is a CSS one-dimensional layout model for arranging, sizing, aligning, and distributing items along a row or column.
- flex containerconfigures · A flex container is an element whose children are laid out as flex items according to the CSS Flexible Box Layout model.
- align-selfused by · The CSS align-self property controls an individual item’s alignment along its container’s cross or block axis, overriding the container’s default.
- alignment keywordsuses · CSS alignment keywords specify how content, items, tracks, or coordinate origins are positioned within an available space.
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.