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

The align-content Property

The align-content: center; Example

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:

center - used to move the content to the center of the flex container
stretch - used to stretch the content to cover the complete area. This is the default one
space-between - used to create equal spaces between all the flex items. There will be no space before and after the first and last flex item
space-evenly - used to create equal spaces from top to bottom. There will be equal space before and after the first and last flex item
space-around - used to create equal spaces. Therefore will be half space before and after the first and last flex item
flex-start - used to move the content to the top of the flex container
flex-end - used to move the content to the bottom of the flex container
initial - used to use the default value
inherit - used to use the value inherit by the parent element

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

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

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

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

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

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

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

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

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

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

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

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

CSS Online Test

« Previous Tutorial Next Tutorial »