Align Content

The last property that can be applied to the flex container is the Align content property. The Property aligns the line of content along with the cross axis this is sort of a mix of justify-content and align-items. It distributes additional space but along the cross axis.

Stretch – align content default value

.container {
    display: flex;
    flex-wrap:wrap
    height: 160px;
    width:300px;
}
.align-content-stretch {
  align-content: stretch;
}

and the html will be:

<div class="container align-content-stretch"> ...
</div>

After this what we will get to display is:

Flex Start

So the second value we can specify is flex-start. This pulls the line to the beginning of the cross axis.

.align-content-start {
  align-content: flex-start;
}

and the html will be:

<div class="container align-content-start"> ...
</div>

After this what we will get to display is:

Flex End

Similar to flex-start we also have flex-end. Flex end pushes the item to the end of the cross axis.

.align-content-end {
  align-content: flex-end;
}

and the html will be:

<div class="container align-content-end"> ...
</div>

After this what we will get to display is:

Center Align

The another value is center which centers the content on the cross axis.

.align-content-center {
  align-content: center;
}

and the html will be:

<div class="container align-content-center"> ...
</div>

After this what we will get to display is:

Space Between

The another value is Space Between which takes all the extra space and puts in between the line.

.align-content-space-between {
  align-content: space-between;
}

and the html will be:

<div class="container align-content-space-between"> ...
</div>

After this what we will get to display is:

Space Around

The finally we also have Space Around which distributes the space around the line. so the center portion has twice the space as the edges.

.align-content-space-around {
  align-content: space-around;
}

and the html will be:

<div class="container align-content-space-around"> ...
</div>

After this what we will get to display is:

DEMO

See the Pen
Align Content Property – Flex by rehmaanali (@geekstrick)
on CodePen.

.
.