Web development

CSS align-self Property

CSS align-self Property

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



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.


<!DOCTYPE html>
#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;

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



Third div with more content.

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

Enjoy coding!

Read also:

CSS flex Property

CSS justify-content Property