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

CSS Align Items Property Example [How To]

“How to write align-items property using css”?

The Align Items property is a sub property of “Flexible Box” and defines the default behaviour for how “flex items” are layout the cross axis on the current.

Stayed Informed - CSS Properties Values and Examples

Align Content property accepts 5 different values and It can be
1.      centre,
2.      flex-end,
3.      flex-start,  
4.      stretch and
5.      baseline

CSS Syntax:-

.align-items {
width: 300px;
height: 300px;
border: 1px solid #4caf50;
display: flex;
align-items: center;
}

Example as,





.align-items {
width: 300px;
height: 300px;
border: 1px solid #4caf50;
display: flex;
align-items: center;
}

.align-items div {
flex: 1;
}




class="align-items">
style="background-color:lightblue;">BLUE COLOR

style="background-color:coral;">RED COLOR

style="background-color:lightgreen;">AND SO ON..





The Output look like,





BLUE COLOR
RED COLOR
AND SO ON..

Share the post

CSS Align Items 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

×