CSS align-content Property

CSS align-content

The align-content property in CSS is used to control the vertical and horizontal alignment of a flex container’s content when there is extra space on the cross-axis. This property is applied to multi-line flex containers (i.e., containers with flex-wrap set to wrap or wrap-reverse).

Syntax of align-content

</>

Copy

align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | initial | inherit;

Values

Value	Description
`flex-start`	Lines are packed to the start of the container.
`flex-end`	Lines are packed to the end of the container.
`center`	Lines are packed to the center of the container.
`space-between`	Lines are distributed with equal space between them.
`space-around`	Lines are distributed with equal space around them.
`space-evenly`	Lines are distributed with equal space between, before, and after them.
`stretch`	Lines are stretched to fill the container.
`initial`	Resets the property to its default value (which is `stretch`).
`inherit`	Inherits the value from its parent container.

Default Value

stretch

Examples for align-content

Using the CSS align-content Property

This example demonstrates how to use the align-content property to arrange content within a flex container.

</>

Copy

.container {
  width: 400px;
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

Complete HTML Example

The following example shows how align-content behaves with wrapped flex items inside a container.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS align-content Property</title>
<style>
  .container {
    width: 400px;
    height: 200px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    border: 2px solid black;
  }

  .box {
    width: 50px;
    height: 50px;
    background-color: red;
    margin: 5px;
    text-align: center;
    line-height: 50px;
  }
</style>
</head>
<body>
<h1>CSS align-content Property Example</h1>

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

</body>
</html>

Using the align-content Property in JavaScript

In JavaScript, you can dynamically set the align-content property of a flex container using the style.alignContent property.

</>

Copy

element.style.alignContent = "space-around";

Example for Setting align-content Dynamically in JS

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic align-content Example</title>
<style>
  .container {
    display: flex;
    flex-wrap: wrap;
    height: 200px;
    border: 2px solid black;
    margin-bottom: 10px;
  }

  .box {
    flex: 0 0 30%;
    height: 50px;
    background-color: lightblue;
    margin: 5px;
    text-align: center;
    line-height: 50px;
  }

  button {
    padding: 10px 20px;
    font-size: 16px;
  }
</style>
</head>
<body>

<h1>Dynamic align-content Example</h1>

<div class="container" id="flexContainer">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

<button id="alignCenter">Align Center</button>
<button id="alignSpaceAround">Align Space Around</button>

<script>
  // Get the flex container and buttons
  const flexContainer = document.getElementById("flexContainer");
  const alignCenterButton = document.getElementById("alignCenter");
  const alignSpaceAroundButton = document.getElementById("alignSpaceAround");

  // Event listener to align content to the center
  alignCenterButton.addEventListener("click", () => {
    flexContainer.style.alignContent = "center";
  });

  // Event listener to align content with space around
  alignSpaceAroundButton.addEventListener("click", () => {
    flexContainer.style.alignContent = "space-around";
  });
</script>

</body>
</html>

Explanation:

A flex container with ID flexContainer is styled with display: flex and flex-wrap: wrap.
Two buttons are provided to dynamically change the align-content property of the container.
The JavaScript code listens for button clicks and sets the alignContent style of the container to either center or space-around.

Browser Support

The align-content property is supported in all modern browsers. Below is a compatibility table:

Browser	Version
Chrome	57.0
Firefox	52.0
Safari	10.1
Edge	16.0
Opera	44.0

TutorialKart

CSS align-content Property