Flexbox - Align Self

This property is similar to align-items, but here, it is applied to individual flex items.
Usage −
align-self: auto | flex-start | flex-end | center | baseline | stretch;

This property accepts the following values −
flex-start − The flex item will be aligned vertically at the top of the container.
flex-start − The flex item will be aligned vertically at the top of the container.
flex-end − The flex item will be aligned vertically at the bottom of the container.
flex-end − The flex item will be aligned vertically at the bottom of the container.
flex-center − The flex item will be aligned vertically at the center of the container.
flex-center − The flex item will be aligned vertically at the center of the container.
Stretch − The flex item will be aligned vertically such that it fills up the whole vertical space of the container.
Stretch − The flex item will be aligned vertically such that it fills up the whole vertical space of the container.
baseline − The flex item will be aligned at the base line of the cross axis.
baseline − The flex item will be aligned at the base line of the cross axis.
On passing this value to the property align-self, a particular flex-item will be aligned vertically at the top of the container.
The following example demonstrates the result of passing the value flex-start to the align-self property.
<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:start;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>
It will produce the following result −
On passing this value to the property align-self, a particular flex-item will be aligned vertically at the bottom of the container.
The following example demonstrates the result of passing the value flex-end to the align-self property.
<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:flex-end;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>
It will produce the following result −
On passing the value center to the property align-self, a particular flex-item will be aligned vertically at the center of the container.
The following example demonstrates the result of passing the value center to the align-self property.
<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:center;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>
It will produce the following result −
On passing this value to the property align-self, a particular flex item it will be aligned vertically such that it fills up the whole vertical space of the container.
The following example demonstrates the result of passing the value stretch to the align-self property.
<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:stretch;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>
It will produce the following result −

    21 Lectures 
     2.5 hours 

 DigiFisk (Programming Is Fun)

    87 Lectures 
     11 hours 

 Code And Create

    167 Lectures 
     45.5 hours 

 Muslim Helalee
 Print
 Add Notes
 Bookmark this page