“How to write align-content property using css”?
The Align Content property is a sub property of “Flexible Box” and it used to align the contents and HTML elements. The default property of an align-content is stretch.
Stayed Informed - CSS Properties Values and Examples
Stayed Informed - CSS Properties Values and Examples
Align Content property accepts 9 different values and It can be
1. centre,
2. flex-end,
3. flex-start,
4. Inherit,
5. initial,
6. space-around,
7. space-between,
8. stretch and
9. unset
IE10 and earlier versions are not supported to the align-content property.
.alignContent {
width: 70px;
height: 350px;
margin-left:200px;
border: 1px solid #4caf50;
display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
}
Example as,
DOCTYPE html>
html>
head>
style>
.alignContent {
width: 70px;
height: 350px;
margin-left:200px;
border: 1px solid #4caf50;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
}
.alignContent div {
width: 70px;
height: 70px;
}
style>
head>
body>
div class="alignContent">
div style="background-color:pink;">div>
div style="background-color:coral;">div>
div style="background-color:lightblue;">div>
div>
body>
html>
The Output look like,
Noted Point: IE10 and earlier versions are not supported to the align-content property.
I hope you are enjoying with this post! Please share with you friends. Thank you!!
