CSS align-self Property
Description
The align-self
property sets alignment of individual row elements inside a flex container, or aligns a grid layout element inside a cell along the axis of a grid container column.
- Initial value
- auto
- Applies to
- Flex items, grid items, and absolutely-positioned boxes
- Inherited
- No
- Media
- Visual
- Computed value
- Specified value
- Animatable
- No
- CSS Version
- CSS3
- JavaScript syntax
- object.style.alignSelf
Syntax
align-self: auto | flex-start | flex-end | center | baseline | stretch
Values
- autoTakes the parent value of align-items or stretch if there is no parent.
- flex-startThe element is aligned at the beginning of the transverse axis of the container.
- flex-endThe element is aligned at the end of the transverse axis of the container.
- centerThe element is aligned in the center line on the transverse axis.
- baselineThe element is aligned with the baseline of the text.
- stretchThe element is stretched in such a way as to occupy the entire free space of the container along the transverse axis.
Example
<div class="flex-container">
<div class="flex-item item1">Fenech is a fox living in the deserts of North Africa. It has a fairly miniature size and a peculiar appearance with large ears.</div>
<div class="flex-item item2">Korsak - a predatory mammal of the genus foxes.</div>
<div class="flex-item item3">Fox - a predatory mammal of the canine family, the most common and largest species of the genus foxes.</div>
</div>
.flex-container {
display: flex;
align-items: flex-start;
height: 160px;
}
.flex-item {
margin-left: 1rem;
padding: 10px;
width: 33.333%;
}
.flex-item:first-child {
margin-left: 0;
}
.flex-item:hover {
align-self: stretch;
}
.item1 {
background: #F0BA7D;
}
.item2 {
background: #CAE2AA;
}
.item3 {
background: #A6C0C9;
}
Browser Support
Desktop | |||||
11 | 12 | 36 | 20 | 12.1 | 9 |
Tablets / Mobile | |||||
![]() |
|||||
37 | 36 | 20 | 12.1 | 9 | 3.0 |