CSS align-content

The align-content property defines how the browser distributes space between and around content items along the cross-axis of a flexbox container, when the items do not use all available space.

There are several values that you can use with the align-content property:

flex-start: Lines are packed at the start of the container.
flex-end: Lines are packed at the end of the container.
center: Lines are packed at the center of the container.
space-between: Lines are evenly distributed in the container.
space-around: Lines are evenly distributed with equal space around them.
stretch: Lines are stretched to take up the remaining space.

Let's see an example of how the align-content property works :

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

    .item {
      width: 100px;
      height: 50px;
      background-color: lightblue;
      margin: 10px;
      color:black;
    }

<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>

Result:

Item 1

Item 2

Item 3

Item 4

Item 5

In this example, we have a flex container with five items inside. The align-content: space-between; property value is applied to the container, which evenly distributes the space between the items. You can adjust the property value and see how it affects the layout of the items within the container.