
The CSS align-items property defines the default alignment for items inside the flexible container.
Demo:
Syntax:
align-items: stretch|center|flex-start|flex-end|baseline;
stretch (default) – items are stretched to fit the container.
center – items are positioned at the center of the container.
flex-start – items are positioned at the beginning of the container.
flex-end – items are positioned at the end of the container.
baseline – items are positioned at the baseline of the container.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#content {
width: 200px;
height: 200px;
border: 3px solid #333;
display: flex;
align-items: center;
}
.one, .two, .three {
flex: 1;
}
</style>
</head>
<body>
<div id="content">
<div class="one" style="background-color:#e76f51;">One</div>
<div class="two" style="background-color:#e9c46a;">Two</div>
<div class="three" style="background-color:#2a9d8f;">Third div with more content.</div>
</div>
</body>
</html>
Output:
One
Two
Third div with more content.
Note: Internet Explorer 10 and earlier versions do not support the align-items property!
Enjoy coding!
Read also: