align-items Archives - Lena Design

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!