align-self Archives - Lena Design

The CSS align-self property defines the alignment for the selected item inside the flexible container.

Demo:

Syntax:

align-self: auto|stretch|center|flex-start|flex-end|baseline;

auto (default) – the element inherits its parent container’s align-items property, or “stretch” if it has no parent container.

stretch – the element is positioned to fit the container.

center – the element is positioned at the center of the container.

flex-start – the element is positioned at the beginning of the container.

flex-end – the element is positioned at the end of the container.

baseline – the element is positioned at the baseline of the container.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
#box-content {
  width: 200px;
  height: 200px;
  border: 3px solid #333;
  display: flex;
  align-items: flex-start;
}

.one, .two, .three {
  flex: 1;
}

.two {
  align-self: center;
}
</style>
</head>
<body>

<div id="box-content">
  <div class="one" style="background-color:#e76f51;">One</div>
  <div class="two" style="background-color:#e9c46a;">Three</div> 
  <div class="three" style="background-color:#2a9d8f;">Third div with more content.</div>
</div>

</body>
</html>

Output:

One

Three

Third div with more content.

Note: Internet Explorer 10 and earlier versions do not support the align-self property!

Enjoy coding!