CSS align content Property

align-content Property

align-content is like justify-content.

Only it determines how the grid rows are aligned along the column axis instead of columns along the row axis.

Syntax -

align-content: value;

Now we will see the different values attached to the property -

It has a total of seven values -

1. start

Aligns the grid rows at the start of the column axis

2. end

Aligns the grid rows at the end of the column axis

3. center

Aligns the grid rows at the center of the column axis

4. stretch

Stretches the rows to fill the column axis, if the rows are set to auto.

5. space-around

Adds even spacing between rows, with half-sized spaces at the start and end.

6. space-evenly

Adds even spacing between rows, with full-sized spaces at the start and end

7. space-between

Place the first row flush with the top of the container and the last row flush with the bottom of the container and add even spacing in between the other rows.

Now we will see Example -

Example - align-content: center on a horizontal flexbox -

HTML -

"container">

CSS -

div#container {

display: flex;

flex-direction: row;

align-items: center;

}

/* for better viewing */

body, html {

margin: 0;

height: 100%;

box-sizing: border-box;

padding: 10px;

background-color: white;

}

div#container {

background-color: #e9e9e9;

height: 100%;

width: 100%;

}

div#container > div {

background-color: #57797f;

width: 100px;

height: 100px;

margin: 10px;

}

Output -

Example 2 - align-content: center on a vertical flexbox -

HTML -

"container">

CSS -

div#container {
display: flex;
flex-direction: column;
align-items: center;
}

/* for better viewing */
body, html {
margin: 0;
height: 100%;
box-sizing: border-box;
padding: 10px;
background-color: white;
}
div#container {
background-color: #e9e9e9;
height: 100%;
width: 100%;
}
div#container > div {
background-color: #57797f;
width: 100px;
height: 100px;
margin: 10px;
}

Output -