Flexbox Align Self Property

In this article, we will see about the CSS flexbox align-self property. The align-self property is used to align the items individually. And it accepts 5 values like auto, flex-start, flex-end, center, and stretch. If specified, it will always override the aligned items value of the flex container.

Example

HTML:

<div id="container">
   <div class="item item-1">Item 1</div>
   <div class="item item-2">Item 2</div>
   <div class="item item-3">Item 3</div>
   <div class="item item-4">Item 4</div>
   <div class="item item-5">Item 5</div>
</div>

CSS:

#container{
  border: 2px black solid;
  display: flex;
  height: 200px;
}
.item{
   width: 50px;
   padding: 1px;
}
.item-1{
   background-color: red;
}
.item-2{
   background-color: green;
}
.item-3{
   background-color: orange;
}
.item-4{
   background-color: darkviolet;
  
}
.item-5{
   background-color: yellow;
 }

Output:

In our above example, we have created a <div> flex container and inside it we have created 5 <div> flex items. See the above output, the parent container is displayed inside the flex items. And, we have set the container height to 200px, so the items stretch from cross start to cross end. Let’s set the values of the align-self property to separate items.

Flex-start:

If we set the “align-self” property to ‘flex-start’ for flex-item 1, item-1 is pulled to the top which is where the cross-axis starts.

.item-1{
  background-color: red;
  align-self : flex-start;
}

output:

 Align Self Property Flex-end:

It is used to align the item with the end of the cross-axis. So, if we set the “align-self” property to ‘flex-end’ for flex-item 2, item-2 will pull to the bottom which is where the cross end.

.item-2{
  background-color: green;
  align-self : flex-end;
}

Output:

Center:

If we set the “align-self” property to ‘center’ for flex-item 3, it will display in centered.

.item-3{
 background-color: orange;
 align-self : center;
}

Output:

 Align Self Property Stretch value:

If we set the “align-self” property to ‘center’ for flex-item 4, it will stretch the item from cross start to cross end. See the below output, there is no difference then you might think stretch is the default value for the align-self property. But that is wrong, the default value of the align-self property is ‘auto’, which implies that aligned self must be computed from the line items property of the parent flex container. Item-5 is stretched because the default container has align-items of stretch and flex item 5 has auto. Auto specifies that the item should take the value for an aligned self as the value of parents’ align items. So, item-5 takes the value of stretch from the parent container.

.item-4{
  background-color: darkviolet;
  align-self : stretch;
}

Output: