CSS align-self Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The align-self CSS property overrides the align-items property for a specific flex or grid item. It allows you to align an item along the cross axis, which is the axis perpendicular to the main axis. The main axis is the horizontal axis for flex containers and the vertical axis for grid containers.

Initial value: auto
Applies to: Flex items, grid items, and absolutely-positioned boxes
Inherited: No
Computed value: Specified value
Animatable: discrete
JavaScript syntax: object.style.alignSelf

Interactive Demo

align-self: stretch;

align-self: center;

align-self: start;

align-self: end;

One

Two

Three

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

Editor