Flexbox - Align Self

Advertisements

Previous Page
Next Page  

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-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.

  • 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.

flex-start

On passing this value to the property align-self, a particular flex-item will be aligned vertically at the top of the container.

Flex Align Self Start

The following example demonstrates the result of passing the value flex-start to the align-self property.

Live Demo 
<!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 −

flex-end

On passing this value to the property align-self, a particular flex-item will be aligned vertically at the bottom of the container.

Flex Align Self End

The following example demonstrates the result of passing the value flex-end to the align-self property.

Live Demo 
<!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 −

center

On passing the value center to the property align-self, a particular flex-item will be aligned vertically at the center of the container.

Flex Align Self Center

The following example demonstrates the result of passing the value center to the align-self property.

Live Demo 
<!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 −

stretch

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.

Flex Align Self Stretch

The following example demonstrates the result of passing the value stretch to the align-self property.

Live Demo 
<!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 −

Advertisements