CSS align-content Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 27 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The align-content property in CSS is used to control the alignment of flexible container's lines within the flex container when there is extra space on the cross-axis.

It is applicable only to flex containers, allowing developers to specify how multiple lines are spaced apart from each other within a container.

💡 Syntax

The syntax for the align-content property is simple. It can be applied to any flex container.

Syntax

Copied

.container {
  align-content: value;
}

🎛️ Default Value

The default value of the align-content property is stretch.

🏠 Property Values

Value	Description
stretch	Lines stretch to take up the remaining space.
center	Lines are packed toward the center of the flex container.
flex-start	Lines are packed toward the start of the flex container.
flex-end	Lines are packed toward the end of the flex container.
space-between	Lines are evenly distributed in the flex container with the first line at the start and the last line at the end.
space-around	Lines are evenly distributed with equal space around each line.
space-evenly	Lines are evenly distributed with equal space between them.

📄 Example

In this example, we'll demonstrate how to use the align-content property to center multiple lines of flex items within a flex container.

index.html

Copied

<!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 Example</title>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      height: 200px;
      align-content: center;
      border: 1px solid #000;
    }
    .item {
      flex: 0 0 30%;
      margin: 5px;
      height: 50px;
      background-color: lightblue;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <h1>Flex Container with Centered Content</h1>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The align-content property is widely supported in all modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It is important to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The align-content property is an essential tool for web developers working with flexbox layouts. It provides control over the alignment of flex lines within a container, ensuring that the layout remains visually appealing and consistent. Experiment with different values of the align-content property to see how it can enhance the layout of your flex containers.