Layout
align-self
align-self goes on a single flex or grid item and gives it a different position on the cross axis (vertical, for a row) from the align-items of its container.
Syntax
auto | normal | stretch | <baseline-position>
| <overflow-position>? <self-position> | anchor-centerPreview
Code
.box {
display: flex;
}
.box > :nth-child(2) {
align-self: center;
}Controls
About
Values
auto: the initial value. Follows thealign-itemsof the container (the parent).normalandstretch: stretch an item without a set height to the height of the line (the two are the same in flexbox and grid).flex-start,flex-endandcenter: put the item at the top, bottom or middle of the line. The item shrinks to the height of its content.start,end,self-startandself-end: use the writing direction to decide which side is the start.baselineandlast baseline: line up the item's text baseline with other baseline-aligned items.anchor-center: centers an element placed with anchor positioning on its anchor.
Putting safe before an alignment value switches to start when the item is taller than the line, so its top does not get cut off.
A property for items
align-self goes on an item inside, not on the container. The preview on this page makes the box display: flex with a helper declaration and puts align-self on the second item only (.box > :nth-child(2)). The other items stay stretched by the container's initial align-items, so only the outlined item 2 moves.
The horizontal position
For grid items, justify-self sets the horizontal position. It has no effect on flex items, so to push one flex item to the right, give it margin-left: auto.