How to set align-self property to its default value in CSS ?

Last Updated : 18 Apr, 2021

In this article, we will learn how to set the align-self property to its default value. The align-self property is used to specify the alignment for the chosen item within the parent element.

Approach: The auto value in the align-self property is used to set the default value in CSS. This value makes this property directly inherit its behavior of the parent element. In the case, this is not possible, the element stretches like the use of the stretch attribute.

Syntax:

align-self: auto

The below example demonstrates the above approach.

Example 1: In this example, the parent container has align-items set to center.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        #parent { 
            width: 500px; 
            height: 300px; 
            border: 5px solid gray; 
            display: flex; 
            align-items: center; 
        } 
  
        #parent>div { 
            padding: 10px; 
            margin: 10px; 
        } 
  
        #box1 { 
            border: 2px solid black; 
        } 
  
        #box2 { 
            align-self: auto; 
            border: 2px dashed black; 
        } 
  
        #box3 { 
            align-self: baseline; 
            border: 2px dashed black; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="parent"> 
        <div style="background-color:pink;" id="box1"> 
            Child One with no align-self specified 
        </div> 
        <div style="background-color:yellow;" id="box2"> 
            Child Two with align-self set to auto 
        </div> 
        <div style="background-color:orange;" id="box3"> 
            Child Three with align-self set to baseline 
        </div> 
    </div> 
</body> 
  
</html> 

Output: We can see that the first two elements inherit the property from the parent.

Example 2: In this example, the parent container does not have the align-items property specified.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        #parent { 
            width: 500px; 
            height: 300px; 
            border: 5px solid gray; 
            display: flex; 
        } 
  
        #parent>div { 
            padding: 10px; 
            margin: 10px; 
        } 
  
        #box1 { 
            border: 2px solid black; 
        } 
  
        #box2 { 
            align-self: auto; 
            border: 2px dashed black; 
        } 
  
        #box3 { 
            align-self: center; 
            border: 2px dashed black; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="parent"> 
        <div style="background-color:pink;" id="box1"> 
            Child One with no align-self specified 
        </div> 
        <div style="background-color:yellow;" id="box2"> 
            Child Two with align-self set to auto 
        </div> 
        <div style="background-color:orange;" id="box3"> 
            Child Three with align-self set to center 
        </div> 
    </div> 
</body> 
  
</html> 