CSS | align-self Property

The align-self property in CSS is used to align the selected items in the flexible container in many different manners such as flex-end, center, flex-start, etc.

Syntax:

align-self: auto|stretch|center|flex-start|flex-end|baseline|
initial;

Property values:
auto: This property is used to inherits its parent container align-items property or stretched if it has no parent container. It is a default value.

Syntax:
```
align-self: auto;
```

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | align-self Property 
    </title> 
    <style> 
        #geeks { 
            width: 250px; 
            height: 200px; 
            border: 4px solid black; 
            display: -webkit-flex; 
            -webkit-align-items: flex-start; 
            display: flex; 
            align-items: flex-start; 
        } 
          
        #geeks div { 
            -webkit-flex: 2; 
            flex: 1; 
        } 
          
        #sudo { 
            -webkit-align-self: auto; 
            align-self: auto; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h2 style="color:green;"> 
          GeeksForGeeks 
        </h2> 
        <h3 style="color:green;"> 
          align-self:auto; 
        </h3> 
        <div id="geeks"> 
            <div style="background-color:green;color:white;"> 
              Geeks 
            </div> 
            <div style="background-color:lightblue;"
                 id="sudo"> 
              For 
            </div> 
            <div style="background-color:coral;"> 
              Geeks 
            </div> 
            <div style="background-color:lightblue;"> 
              Sudo 
            </div> 
            <div style="background-color:tomato;"> 
              Placement 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>          

Output:

stretch: This property is used to positioned the elements to fit the container.

Syntax:
```
align-self: stretch;
```

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | align-self Property 
    </title> 
    <style> 
        #geeks { 
            width: 250px; 
            height: 200px; 
            border: 4px solid black; 
            display: -webkit-flex; 
            -webkit-align-items: flex-start; 
            display: flex; 
            align-items: flex-start; 
        } 
          
        #geeks div { 
            -webkit-flex: 2; 
            flex: 1; 
        } 
          
        #sudo { 
            -webkit-align-self: stretch; 
            align-self: stretch; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h2 style="color:green;"> 
          GeeksForGeeks 
        </h2> 
        <h3 style="color:green;"> 
          align-self:stretch; 
        </h3> 
        <div id="geeks"> 
            <div style="background-color:green;color:white;"> 
              Geeks</div> 
            <div style="background-color:lightblue;" 
                 id="sudo"> 
              For 
            </div> 
            <div style="background-color:coral;"> 
              Geeks 
            </div> 
            <div style="background-color:lightblue;"> 
              Sudo 
            </div> 
            <div style="background-color:tomato;"> 
              Placement 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>   

Output:

Center: This Property is used to place the item at the center of the flexible container.

Syntax:
```
align-self: center;
```

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | align-self Property 
    </title> 
    <style> 
        #geeks { 
            width: 250px; 
            height: 200px; 
            border: 4px solid black; 
            display: -webkit-flex; 
            -webkit-align-items: flex-start; 
            display: flex; 
            align-items: flex-start; 
        } 
          
        #geeks div { 
            -webkit-flex: 1; 
            flex: 1; 
        } 
          
        #sudo { 
            -webkit-align-self: center; 
            align-self: center; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h2 style="color:green;"> 
          GeeksForGeeks 
        </h2> 
        <h3 style="color:green;"> 
          align-self:center; 
        </h3> 
        <div id="geeks"> 
            <div style="background-color:green;color:white;"> 
              Geeks 
            </div> 
            <div style="background-color:lightblue;" 
                 id="sudo"> 
              For 
            </div> 
            <div style="background-color:coral;"> 
              Geeks 
            </div> 
            <div style="background-color:lightblue;"> 
              Sudo 
            </div> 
            <div style="background-color:tomato;"> 
              Placement 
            </div> 
        </div> 
    </center> 
</body> 
  
</html> 

Output:

flex-start: This property is used to align the selected item at the beginning of the flexible container.

Syntax:
```
align-self: flex-start;
```

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | align-self Property 
    </title> 
    <style> 
        #geeks { 
            width: 250px; 
            height: 200px; 
            border: 4px solid black; 
            display: -webkit-flex; 
            -webkit-align-items: flex-start; 
            display: flex; 
            align-items: flex-start; 
        } 
          
        #geeks div { 
            -webkit-flex: 1; 
            flex: 1; 
        } 
          
        #sudo { 
            -webkit-align-self: flex-start; 
            align-self: flex-start; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h2 style="color:green;"> 
          GeeksForGeeks 
        </h2> 
        <h3 style="color:green;"> 
          align-self:flex-start; 
        </h3> 
        <div id="geeks"> 
            <div style="background-color:green;color:white;"> 
              Geeks 
            </div> 
            <div style="background-color:lightblue;"
                 id="sudo"> 
              For 
            </div> 
            <div style="background-color:coral;"> 
              Geeks 
            </div> 
            <div style="background-color:lightblue;"> 
              Sudo 
            </div> 
            <div style="background-color:tomato;"> 
              Placement 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>       

Output:

flex-end: This Property is used to position the selected item at the end of the flexible container.

Syntax:
```
align-self: flex-end;
```

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | align-self Property 
    </title> 
    <style> 
        #geeks { 
            width: 250px; 
            height: 200px; 
            border: 4px solid black; 
            display: -webkit-flex; 
            -webkit-align-items: flex-start; 
            display: flex; 
            align-items: flex-start; 
        } 
          
        #geeks div { 
            -webkit-flex: 1; 
            flex: 1; 
        } 
          
        #sudo { 
            -webkit-align-self: flex-end; 
            align-self: flex-end; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h2 style="color:green;"> 
          GeeksForGeeks 
        </h2> 
        <h3 style="color:green;"> 
          align-self:flex-end; 
        </h3> 
        <div id="geeks"> 
            <div style="background-color:green;color:white;"> 
              Geeks 
            </div> 
            <div style="background-color:lightblue;" 
                 id="sudo"> 
              For 
            </div> 
            <div style="background-color:coral;"> 
              Geeks 
            </div> 
            <div style="background-color:lightblue;"> 
              Sudo 
            </div> 
            <div style="background-color:tomato;"> 
              Placement 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>         

Output:

Baseline: The item is placed at the baseline of the flexible container.

Syntax:
```
align-self: baseline;
```

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | align-self Property 
    </title> 
    <style> 
        #geeks { 
            width: 250px; 
            height: 200px; 
            border: 4px solid black; 
            display: -webkit-flex; 
            /* Safari */ 
            -webkit-align-items: center; 
            /* Safari 7.0+ */ 
            display: flex; 
            align-items: center; 
        } 
          
        #geeks div { 
            -webkit-flex: 1; 
            /* Safari 6.1+ */ 
            flex: 1; 
        } 
          
        #sudo { 
            -webkit-align-self: baseline; 
            /* Safari 7.0+ */ 
            align-self: baseline; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h2 style="color:green;"> 
          GeeksForGeeks 
        </h2> 
        <h3 style="color:green;"> 
          align-self:baseline; 
        </h3> 
        <div id="geeks"> 
            <div style="background-color:green;color:white;"> 
              Geeks 
            </div> 
            <div style="background-color:lightblue;" 
                 id="sudo"> 
              For 
            </div> 
            <div style="background-color:coral;"> 
              Geeks 
            </div> 
            <div style="background-color:lightblue;"> 
              Sudo 
            </div> 
            <div style="background-color:tomato;"> 
              Placement 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>            

Output:

initial: It sets the property to its normal position. It is the default value.

Syntax:
```
align-self: initial;
```

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | align-self Property 
    </title> 
    <style> 
        #geeks { 
            width: 250px; 
            height: 200px; 
            border: 4px solid black; 
            display: -webkit-flex; 
            /* Safari */ 
            -webkit-align-items: flex-start; 
            /* Safari 7.0+ */ 
            display: flex; 
            align-items: flex-start; 
        } 
          
        #geeks div { 
            -webkit-flex: 1; 
            /* Safari 6.1+ */ 
            flex: 1; 
        } 
          
        #sudo { 
            -webkit-align-self: initial; 
            /* Safari 7.0+ */ 
            align-self: initial; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h2 style="color:green;"> 
          GeeksForGeeks 
        </h2> 
        <h3 style="color:green;"> 
          align-self:initial; 
        </h3> 
        <div id="geeks"> 
            <div style="background-color:green;color:white;"> 
              Geeks 
            </div> 
            <div style="background-color:lightblue;" 
                 id="sudo"> 
              For 
            </div> 
            <div style="background-color:coral;"> 
              Geeks 
            </div> 
            <div style="background-color:lightblue;"> 
              Sudo 
            </div> 
            <div style="background-color:tomato;"> 
              Placement 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>     

Output:

Supported browsers: The browser supported by CSS | align-self Property are listed below:
`

Google Chrome 21.0
Internet Explorer 11.0
Firefox 28.0
Opera 12.1
Safari 9.0, 7.0 -webkit-

My Personal Notes

Recommended Posts: