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
Explorer Edge Chrome Firefox Opera Safari
1112362012.19
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
37362012.193.0