Jobs Hub

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
A

The align-self Property

The align-self: center; Example

C
D

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:

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
A
B
C
D

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
A
B
C
D

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
A
B
C
D

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
A
B
C
D

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
A
B
C
D

CSS Online Test

« Previous Tutorial Next Tutorial »