
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!
Read also: