Home HTML CSS JavaScript jQuery ReactJS NodeJS About us Blogs Faqs

CSS align-content Property

The align-content property modifies the flex-wrap property's functionality. It pulls away flex lines. It's used to describe the alignment of lines within a flexible container. This property controls how each flex line within a flexbox is aligned and is only applicable if flex-wrap: wrap is used, i.e. if there are several lines of flexbox items present.

Note : This attribute has no impact unless there are numerous lines of objects!

Tip: To align the elements on the main-axis, use the justify-content property (horizontally).

Syntax

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

Example

​x
 
<!DOCTYPE html>
<html>
<head>
<style>
.box {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    width: 100%;
    height: 250px;
    border: 1px solid #eeeeee;
}
.box div {
    width: 100%;
    height: 50px;
}
</style>
</head>
<body>
​
<div class="box">
    <div style="background-color:#00ab55;"></div>
    <div style="background-color:#ff4842;"></div>
    <div style="background-color:#ffc107;"></div>
</div>
​
</body>
</html>
Preview

Property Values

Value Description
stretch The default setting. Lines expand to fill the remaining space.
center Lines are packed in the flex container's center.
flex-start Lines are packed at the beginning of the flex container.
flex-end Lines are packed at the end of the flex container.
space-between In the flex container, the lines are uniformly dispersed.
space-around Lines are dispersed uniformly in the flex container, with half-size gaps on either end.
space-evenly Lines are placed uniformly in the flex container, with equal space surrounding them.
initial Returns the value of this property to its default value.
inherit Returns the value of this property to its default value.

Supported Browsers

Element Chrome Firefox Safari Edge / IE Opera
align-content 21.0 28.0 11.0 9.0 12.1