The CSS align-content property is used to align a flex container’s lines when there is an extra space in the cross-axis. It is one of the CSS3 properties. If the flex box contains only one line, then this property will not affect. It needs multiple lines within a flexible container.
The default value of this property is “ stretch “. It will make items fit into the container.
- The align-content property accepts the following values.
- flex-start
- flex-end
- center
- space-between
- space-around
- stretch
Syntax:
align-content: flex-start | flex-end | center | space-between | space-around | stretch | initial | inherit;
Values:
| Value | Description |
|---|---|
| stretch | This is the default value of an align-content property. It makes items fit into the container. |
| center | It will place the items at the center of the container. |
| flex-start | This property will place the items at the beginning of the container. |
| flex-end | It helps to place the items at the end of the container. |
| space-between | This property is used to place the items between the lines. |
| space-around | It distributes items with equal space between them. |
| initial | This will make the property use its default value. |
| inherit | It can inherit the property from its parent element. |
Align-Content Property with Stretch Value:
The following code uses align-content property with stretch value.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-flow: row wrap;
-webkit-align-content: stretch;
display: flex;
flex-flow: row wrap;
align-content: stretch;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: stretch; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>
Result:
From the above code, we can get the result as given in the below image.
Align-Content Property with center Value:
You can use the below-given code to align-content in center of the page.
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-flow: row wrap;
-webkit-align-content: center;
display: flex;
flex-flow: row wrap;
align-content: center;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: center</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>
Result:
After running the above code, we will get the output as shown in the below image.
Align-Content Property with flex-start Value:
The following code will apply the align-content property with flex-start value.
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-flow: row wrap;
-webkit-align-content: flex-start;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: flex-start</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>
Result:
By executing above code, you will get the output as follows.
Align-Content Property with flex-end Value:
To know how to use align-content property with flex-end value, use the following code.
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-flow: row wrap;
-webkit-align-content: flex-end;
display: flex;
flex-flow: row wrap;
align-content: flex-end;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: flex-end</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>
Result:
After executing the above code, you can get the result as shown in the below image.
Align-Content Property with space-between Value:
You can use the following code to know how to align content with space between them.
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-flow: row wrap;
-webkit-align-content: space-between;
display: flex;
flex-flow: row wrap;
align-content: space-between;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: space-between</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>
Result:
After running the above code, you will see that the content are aligned with space between them as shown in the below screenshot.
Align-Content Property with space-around Value:
You can apply the following code to align the content with space around them.
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-flow: row wrap;
-webkit-align-content: space-around;
display: flex;
flex-flow: row wrap;
align-content: space-around;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: space-around</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>
Result:
From the above code, you can get the output as given in the below image.
Browser-Support
The post CSS align-content Property appeared first on Share Point Anchor.
Top comments (0)