The align-content property changes the behavior of the flex-wrap property. It aligns flex lines. It is used to specify the alignment between the lines inside a flexible container. This property defines how each flex line is aligned within a flexbox and is only applicable if flex-wrap: wrap is applied i.e. if there are multiple lines of flexbox items present.
List of align-content property:
- center
- stretch
- flex-start
- flex-end
- space-around
- space-between
Description of property value with example
-
center: Lines are placed on the center of flex container.
- Syntax:
align-content:center;
- Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>align-content property</
title
>
<
style
>
.main-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: center;
background-color: green;
}
.main-container div {
background-color: #f4f4f4;
width: 100px;
margin: 10px;
text-align: center;
font-size: 50px;
}
h2 {
text-align:center;
}
.geeks {
font-size:40px;
text-align:center;
color:#009900;
font-weight:bold;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"geeks"
>GeeksforGeeks</
div
>
<
h2
>align-content: center;</
h2
>
<
div
class
=
"main-container"
>
<
div
>1</
div
>
<
div
>2</
div
>
<
div
>3</
div
>
<
div
>4</
div
>
<
div
>5</
div
>
<
div
>6</
div
>
<
div
>7</
div
>
<
div
>8</
div
>
<
div
>9</
div
>
<
div
>10</
div
>
</
div
>
</
body
>
</
html
>
- Output:
stretch: The line stretched to take the remaining space of flex container. It is the default value.
- Syntax:
align-content: stretch;
- Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>align-content property</
title
>
<
style
>
.main-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: stretch;
background-color: green;
}
.main-container div {
background-color: #f4f4f4;
width: 100px;
margin: 10px;
text-align: center;
font-size: 50px;
}
h2 {
text-align:center;
}
.geeks {
font-size:40px;
text-align:center;
color:#009900;
font-weight:bold;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"geeks"
>GeeksforGeeks</
div
>
<
h2
>align-content: stretch;</
h2
>
<
div
class
=
"main-container"
>
<
div
>1</
div
>
<
div
>2</
div
>
<
div
>3</
div
>
<
div
>4</
div
>
<
div
>5</
div
>
<
div
>6</
div
>
<
div
>7</
div
>
<
div
>8</
div
>
<
div
>9</
div
>
<
div
>10</
div
>
</
div
>
</
body
>
</
html
>
- Output:
flex-start: Displays the lines at the start of the flex container.
- Syntax:
align-content: flex-start;
- Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>align-content property</
title
>
<
style
>
.main-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: flex-start;
background-color: green;
}
.main-container div {
background-color: #f4f4f4;
width: 100px;
margin: 10px;
text-align: center;
font-size: 50px;
}
h2 {
text-align:center;
}
.geeks {
font-size:40px;
text-align:center;
color:#009900;
font-weight:bold;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"geeks"
>GeeksforGeeks</
div
>
<
h2
>align-content: flex-start;</
h2
>
<
div
class
=
"main-container"
>
<
div
>1</
div
>
<
div
>2</
div
>
<
div
>3</
div
>
<
div
>4</
div
>
<
div
>5</
div
>
<
div
>6</
div
>
<
div
>7</
div
>
<
div
>8</
div
>
<
div
>9</
div
>
<
div
>10</
div
>
</
div
>
</
body
>
</
html
>
- Output:
flex-end: Displays the flex lines at the end of the flex container
- Syntax:
align-content: flex-end;
- Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>align-content property</
title
>
<
style
>
.main-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: flex-end;
background-color: green;
}
.main-container div {
background-color: #f4f4f4;
width: 100px;
margin: 10px;
text-align: center;
font-size: 50px;
}
h2 {
text-align:center;
}
.geeks {
font-size:40px;
text-align:center;
color:#009900;
font-weight:bold;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"geeks"
>GeeksforGeeks</
div
>
<
h2
>align-content: flex-end;</
h2
>
<
div
class
=
"main-container"
>
<
div
>1</
div
>
<
div
>2</
div
>
<
div
>3</
div
>
<
div
>4</
div
>
<
div
>5</
div
>
<
div
>6</
div
>
<
div
>7</
div
>
<
div
>8</
div
>
<
div
>9</
div
>
<
div
>10</
div
>
</
div
>
</
body
>
</
html
>
- Output:
space-around: By using space-around property space will be distributed equally around the flex lines.
- Syntax:
align-content: space-around;
- Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>align-content property</
title
>
<
style
>
.main-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-around;
background-color: green;
}
.main-container div {
background-color: #f4f4f4;
width: 100px;
margin: 10px;
text-align: center;
font-size: 50px;
}
h2 {
text-align:center;
}
.geeks {
font-size:40px;
text-align:center;
color:#009900;
font-weight:bold;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"geeks"
>GeeksforGeeks</
div
>
<
h2
>align-content: space-around;</
h2
>
<
div
class
=
"main-container"
>
<
div
>1</
div
>
<
div
>2</
div
>
<
div
>3</
div
>
<
div
>4</
div
>
<
div
>5</
div
>
<
div
>6</
div
>
<
div
>7</
div
>
<
div
>8</
div
>
<
div
>9</
div
>
<
div
>10</
div
>
</
div
>
</
body
>
</
html
>
- Output:
space-between: Displays the flex lines with equal space between them.
- Syntax:
align-content: space-between;
- Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>align-content property</
title
>
<
style
>
.main-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-between;
background-color: green;
}
.main-container div {
background-color: #f4f4f4;
width: 100px;
margin: 10px;
text-align: center;
font-size: 50px;
}
h2 {
text-align:center;
}
.geeks {
font-size:40px;
text-align:center;
color:#009900;
font-weight:bold;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"geeks"
>GeeksforGeeks</
div
>
<
h2
>align-content: space-between;</
h2
>
<
div
class
=
"main-container"
>
<
div
>1</
div
>
<
div
>2</
div
>
<
div
>3</
div
>
<
div
>4</
div
>
<
div
>5</
div
>
<
div
>6</
div
>
<
div
>7</
div
>
<
div
>8</
div
>
<
div
>9</
div
>
<
div
>10</
div
>
</
div
>
</
body
>
</
html
>
- Output:
Supported browser: The browser supported by CSS | align-content property are listed below:
- Google Chrome 21.0
- Internet Explorer 11.0
- Firefox 28.0
- Opera 12.1
- Safari 9.0, 7.0 -webkit-