Align-self
The CSS align-self property controls an individual item’s alignment along its container’s cross or block axis, overriding the container’s default.
Web Design Playground
A CSS flexbox property that overrides the default cross-axis alignment of an individual flex item.
- How it is used
- Overrides a flex item’s cross-axis alignment when it should differ from the container-wide align-items rule.
- How deep it goes
- Explains the override behavior, matching alignment values, auto reset, and a flex-start/flex-end example without deeper layout mechanics.
- Examples
- Uses a container aligned flex-start with its last item overridden to flex-end.
- What you can do after
- Operate/configure it to give one flex item a different cross-axis alignment from its siblings.
Web Design Playground, Second Edition
The CSS align-self property specifies an individual flex item’s cross-axis alignment, overriding the container’s align-items value.
- How it is used
- Overrides a flex container’s align-items setting for one item’s cross-axis alignment.
- How deep it goes
- Defines the property, lists its values, and illustrates one item overriding flex-start with flex-end.
- Examples
- Shows a flex-start container whose last item uses flex-end.
- What you can do after
- Apply it to give one flex item a different cross-axis alignment from its siblings.
Read how Web Design Playground, Second Edition explains align-self →
CSS in Depth, Second Edition
The CSS align-self property specifies the block-axis or cross-axis alignment of an individual item within its layout container.
- How it is used
- Aligns one flex item differently from the container’s shared cross-axis alignment.
- How deep it goes
- Defines the override rule, supported keywords, shorthand relationship, and a worked text-alignment example.
- Examples
- Uses a stylized $20.00 price tile whose cents receive an align-self: flex-start override.
- What you can do after
- Apply align-self via CSS to override a flex container’s shared alignment for a selected item.
Related concepts
- align-itemsuses · The CSS align-items property specifies how items are aligned along a container’s cross axis in flexbox and grid layouts.
- flexboxused by · Flexbox is a CSS one-dimensional layout model for arranging, sizing, aligning, and distributing items along a row or column.
- align-contentcontrasts with · The CSS align-content property distributes flex lines or grid tracks along a container’s cross or block axis when free space is available.
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.