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

The align-items Property

The align-items: center; Example

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:

center - used to place items at center of the flex container
stretch - used to stretch items to cover the flex container. This is the default one
flex-start - used to place items at top of the flex container
flex-end - used to place items at bottom of the flex container
baseline - used to place items at 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-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

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

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

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

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

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

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

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

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

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

CSS Online Test

« Previous Tutorial Next Tutorial »