CSS align-content

The CSS align-content property is used to align the content in flex container. For example:

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

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

The align-content Property

The align-content: center; Example

C
D

Note - The align-content property modifies flex-wrap property's behavior.

Important - To align items on main or horizontal axis, use justify-content property.

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

CSS align-content Syntax

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

align-content: x;

The value of x should be any of the following:

CSS align-content: center Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; height: 400px; background-color: brown;
         flex-wrap: wrap; align-content: center;}
      .container > div{border: 2px solid coral; padding: 16px; 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

Define width for the flex container and its child elements in a way to align the content 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-content: 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
HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; height: 300px; background-color: brown;
         flex-wrap: wrap; align-content: 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>
   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>
Output
A
B
C
D
A
B
C
D

CSS align-content: stretch Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; height: 400px; background-color: brown;
         flex-wrap: wrap; align-content: 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

Now add width property with 40px value, to both flex container and its all four child DIVs to align all four DIVs vertically and stretch its area. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; height: 400px; width:40px; background-color: brown;
         flex-wrap: wrap; align-content: 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-content: flex-start Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; height: 400px; background-color: brown;
         flex-wrap: wrap; align-content: 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-content: 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-content: flex-end Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; height: 400px; background-color: brown;
         flex-wrap: wrap; align-content: 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-content: 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-content: space-between Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; height: 400px; width:40px; background-color: brown;
         flex-wrap: wrap; align-content: space-between;}
      .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-content: space-evenly Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; height: 400px; width:40px; background-color: brown;
         flex-wrap: wrap; align-content: space-evenly;}
      .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-content: space-around Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; height: 400px; width:40px; background-color: brown;
         flex-wrap: wrap; align-content: space-around;}
      .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 »


Liked this post? Share it!