Tutorials


CSS align-content property


The align-content property in CSS is used within a flex container to align flex lines (rows or columns) along the cross axis when there is extra space in the container. It affects the spacing between flex lines but not the alignment of individual flex items within those lines. This property is particularly useful when the flex container contains multiple lines of flex items (i.e., when the flex-wrap property is set to wrap or wrap-reverse).

Basic Syntax

selector {
  align-content: value;
}

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap; /* Allows flex items to wrap onto multiple lines */
      align-content: space-between; /* Change this value to see different alignment options */
      height: 300px; /* Set a height to see the alignment of multiple lines */
    }
    .item {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: lightcoral;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
</body>
</html>

In this example, align-content: space-between; adjusts the space between the lines of flex items within the container.

Values for align-content

1. flex-start

  • Description: Aligns flex lines to the start of the container along the cross axis. The lines are packed at the beginning, and any extra space is distributed after the last line.
  • Use Case: Use this value to align all flex lines to the top or left of the container.
.container {
  align-content: flex-start; /* Align lines to the start of the container's cross axis */
}

2. flex-end

  • Description: Aligns flex lines to the end of the container along the cross axis. The lines are packed at the end, and any extra space is distributed before the first line.
  • Use Case: Use this value to align all flex lines to the bottom or right of the container.
.container {
  align-content: flex-end; /* Align lines to the end of the container's cross axis */
}

3. center

  • Description: Centers flex lines along the cross axis. The lines are evenly distributed with equal space above and below (or left and right) of them.
  • Use Case: Use this value to center all lines within the container.
.container {
  align-content: center; /* Center lines along the cross axis of the container */
}

4. space-between

  • Description: Distributes flex lines evenly along the cross axis with the first line at the start and the last line at the end. The space between lines is equal, but there is no extra space before the first line or after the last line.
  • Use Case: Use this value to create space between lines of flex items, with the first and last lines touching the edges of the container.
.container {
  align-content: space-between; /* Distribute lines with space between them */
}

5. space-around

  • Description: Distributes flex lines evenly along the cross axis with equal space around each line. The space before the first line and after the last line is half the size of the space between lines.
  • Use Case: Use this value to create equal space around each line of items, including the edges of the container.
.container {
  align-content: space-around; /* Distribute lines with space around each line */
}

6. space-evenly

  • Description: Distributes flex lines evenly along the cross axis with equal space between and around them. The space before the first line and after the last line is the same as the space between lines.
  • Use Case: Use this value to evenly space out lines of items across the entire height or width of the container.
.container {
  align-content: space-evenly; /* Distribute lines with equal space between and around them */
}

7. stretch (default)

  • Description: Stretches flex lines to fill the available space along the cross axis. This is the default value if align-content is not specified.
  • Use Case: Use this value to have flex lines stretch to fill the container’s cross axis.
.container {
  align-content: stretch; /* Stretch lines to fill the container's cross axis */
}

Practical Examples

Example 1: Space Between Lines

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      align-content: space-between; /* Space between lines */
      height: 300px;
    }
    .item {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: lightblue;
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
</body>
</html>

In this example, lines of items are spaced evenly with space between them.

Example 2: Center Lines

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      align-content: center; /* Center lines vertically within the container */
      height: 300px;
    }
    .item {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: lightgreen;
      border: 1px solid green;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
</body>
</html>

Here, the lines of items are centered vertically within the container.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about