align-self
Aligns one item across the main axis, overriding the container's `align-items`.
Syntax
align-self: value;Values
| Parameter | Type | Description |
|---|---|---|
| auto | keyword | Takes the value of the container's `align-items` (the default). |
| center | flex-start | flex-end | keyword | Like the same values of `align-items`. |
| stretch | keyword | Stretched across the line. |
Examples
Each item aligned in its own way:
<style>
.row { display: flex; gap: 6px; height: 100px; background: whitesmoke; }
.row div { padding: 6px; background: khaki; }
</style>
<div class="row">
<div>stretch</div>
<div style="align-self: flex-start;">start</div>
<div style="align-self: center;">center</div>
<div style="align-self: flex-end;">end</div>
</div>Notes
In grid there is also justify-self, which aligns a single item horizontally inside its cell. In flexbox justify-self does not work — use margin-left: auto instead.
See also
- align-items — Aligns items across the main axis — vertically in a row.
- order — Changes the visual order of a flex or grid item.
- justify-items — Aligns grid items horizontally inside their cells.
In the tutorial
- Flex items — How to control individual items in flexbox — flex-grow, flex-shrink, flex-basis, the flex shorthand, align-self, order and margin auto.