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

HTML

<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>

CSS

.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; 
}

Result