CSS Align Content Property Example [How To]

“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

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.

CSS Syntax:-

.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!!

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2