Align Self Property
Last updated: 2026-09-13
align-self Align Self Property
The align-self property sets the cross-axis alignment of a single flex item, overriding the container’s align-items default. Its default value is auto, which inherits the container’s align-items value. With it, one item can align differently from the others - for example one item centered while the rest are top-aligned - which is very useful in navigation bars and card layouts.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
align-self: auto | normal | stretch | center | start | end | self-start | self-end | flex-start | flex-end | baseline;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | normal | stretch | flex-start | flex-end | center | baseline | Keyword | Single item cross axis alignment |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| align-self | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Supported in all major browsers | |||||
Tip： align-self: auto inherits the container’s align-items setting. To restore an item to the default alignment, simply set align-self: auto.
Important： align-self only takes effect in flex and grid layouts. In flexbox it works on the cross axis; in grid it works on the block axis.
❓ FAQ
QWhat is the difference between align-self and align-items?
Aalign-items is set on the flex container and gives every child the same cross-axis alignment. align-self is set on a single flex item and overrides that item’s default alignment; its own default value is auto, which inherits the container’s align-items. align-self has higher priority than align-items and is commonly used to center one item while the others keep the default.
QWhen should I use align-self: baseline?
Abaseline aligns all the items on their text baselines, which looks tidier when the font sizes differ. For example, when a navigation bar contains both a large title and small menu items, or when dates sit next to descriptions in a timeline, align-self: baseline lines up the text baselines more precisely than center or flex-end. When the items wrap into multiple lines, the baseline applies per line, which is usually the desired behavior for aligned rows of mixed-content cards.
QWhich direction does align-self control when flex-direction is column?
Aalign-self always acts on the cross axis. With a row main axis the cross axis is vertical, so it controls the vertical position; after switching to column, the cross axis becomes horizontal and align-self controls the horizontal position instead. The same logic extends to grid, where align-self works on the block axis, the vertical one in a horizontal writing mode. To tell which direction applies, first check flex-direction - the cross axis is always perpendicular to the main axis.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Cross Axis Alignment
Controls how all items align on the cross axis
Justify Self
Overrides the inline axis alignment of a single item
