Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

Share the post

CSS Align Content Property Example [How To]

×

Subscribe to Angular 2 Javascript Asp.net C# Sql Server Knockoutjs Angularjs Kendo Ui Html 5 Web Api Wpf Wcf Etc.

Get updates delivered right to your inbox!

Thank you for your subscription

×