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