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,

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

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