CSS align-self

The CSS align-self property is used to align particular item based on the value assigned to it. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; height: 400px; background-color: brown;
         align-items: flex-start;}
      .container > div{border: 1px solid coral; padding: 12px; color: wheat;}
      #secondiv {align-self: center;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div id="secondiv">
         <h2>The align-self Property</h2>
         <p>The align-self: center; Example</p>
      </div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>

Output

The align-self Property

The align-self: center; Example

Note - The align-self property is used to modifies/overrides the align-items property, of particular/specified item.

CSS align-self Syntax

The syntax of align-self property in CSS, is:

align-self: x;

The value of x should be any of the following:

auto - used to either assign the same value as of align-items or assign stretch if parent element is not available. This is the default value of align-self property
center - used to align particular element to the center of flex container
stretch - used to stretch particular element to fit the flex container
flex-start - used to align particular element to the top of the flex container
flex-end - used to align particular element to the bottom of the flex container
baseline - used to align particular element to the baseline of the flex container
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS align-self: auto Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; height: 400px; background-color: brown;
         align-items: flex-start;}
      .container > div{border: 1px solid coral; padding: 12px; color: wheat;}
      #secondiv {align-self: auto;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div id="secondiv">B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>

Output

CSS align-self: stretch Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; height: 400px; background-color: brown;
         align-items: flex-start;}
      .container > div{border: 2px solid snow; padding: 12px; color: wheat;}
      #secondiv {align-self: stretch;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div id="secondiv">B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>

Output

CSS align-self: flex-start Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; height: 400px; background-color: brown;
         align-items: center;}
      .container > div{border: 1px solid coral; padding: 12px; color: wheat;}
      #secondiv {align-self: flex-start;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div id="secondiv">B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>

Output

CSS align-self: flex-end Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; height: 400px; background-color: brown;
         align-items: center;}
      .container > div{border: 1px solid coral; padding: 12px; color: wheat;}
      #secondiv {align-self: flex-end;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div id="secondiv">B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>

Output

CSS align-self: baseline Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; height: 400px; background-color: brown;
         align-items: center;}
      .container > div{border: 1px solid coral; padding: 12px; color: wheat;}
      #secondiv {align-self: baseline;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div id="secondiv">B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>

Output

CSS Online Test

« Previous Tutorial Next Tutorial »