css

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.


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,

<!DOCTYPE html>
<html>
<head>
<style> 
.align-items {
    width: 300px;
    height: 300px;
    border: 1px solid #4caf50; 
    display: flex;
    align-items: center;
}

.align-items div {
   flex: 1;
}
</style>
</head>
<body>

<div class="align-items">
  <div style="background-color:lightblue;">BLUE COLOR</div>
    <div style="background-color:coral;">RED COLOR</div>
  <div style="background-color:lightgreen;">AND SO ON..</div>
</div>
</body>
</html>

The Output look like,





BLUE COLOR
RED COLOR
AND SO ON..

ANIL SINGH

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 Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.