Jobs Hub

CSS align-items

The CSS align-items property is used to align items inside the flex container. For 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;}
   </style>
</head>
<body>

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

The align-items Property

The align-items: center; Example

C
D

Note - To align particular items based on the requirement, use align-self property.

Note - The align-items aligns item wise, whereas align-content aligns content (whole) wise.

CSS align-items Syntax

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

align-items: x;

The value of x should be any of the following:

CSS align-items: center Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; height: 300px; background-color: brown;
         align-items: center;}
      .container > div{border: 1px solid coral; padding: 12px; color: wheat;}
   </style>
</head>
<body>

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

Note - Define width property for the flex container and its child elements in a way to align all the four items vertically. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; height: 400px; width: 50px; background-color: brown;
         flex-wrap: wrap; align-items: center;}
      .container > div{border: 2px solid coral; padding: 16px; width: 50px; color: wheat;}
   </style>
</head>
<body>

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

CSS align-items: stretch Example
HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; height: 400px; background-color: brown;
         align-items: stretch;}
      .container > div{border: 1px solid coral; padding: 12px; color: wheat;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>
Output
A
B
C
D
HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; height: 400px; width:40px; background-color: brown;
         flex-wrap: wrap; align-items: stretch;}
      .container > div{border: 1px solid coral; width:40px; padding: 12px; color: wheat;}
   </style>
</head>
<body>

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

CSS align-items: flex-start Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; height: 400px; background-color: brown;
         flex-wrap: wrap; align-items: flex-start;}
      .container > div{border: 1px solid coral; padding: 12px; color: wheat;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>
Output
A
B
C
D
HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; height: 400px; width:40px; background-color: brown;
         flex-wrap: wrap; align-items: flex-start;}
      .container > div{border: 1px solid coral; width:40px; padding: 12px; color: wheat;}
   </style>
</head>
<body>

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

CSS align-items: flex-end Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; height: 400px; background-color: brown;
         flex-wrap: wrap; align-items: flex-end;}
      .container > div{border: 1px solid coral; padding: 12px; color: wheat;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>
Output
A
B
C
D
HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; height: 400px; width:40px; background-color: brown;
         flex-wrap: wrap; align-items: flex-end;}
      .container > div{border: 1px solid coral; width:40px; padding: 12px; color: wheat;}
   </style>
</head>
<body>

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

CSS align-items: baseline Example

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

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>
Output
A
B
C
D
HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; height: 400px; width:40px; background-color: brown;
         flex-wrap: wrap; align-items: baseline;}
      .container > div{border: 1px solid coral; width:40px; padding: 12px; color: wheat;}
   </style>
</head>
<body>

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

CSS Online Test

« Previous Tutorial Next Tutorial »