CSS align-self Property

In CSS, the align-self property is used to align the chosen objects in the flexible container in a variety of ways such as flex-end, center, flex-start, and so on.

Syntax

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
.box {
    display: flex;
    align-items: flex-start;
    width: 100%;
    height: 250px;
    border: 1px solid #eeeeee;
}
.box div {
    flex: 1;
}
.box .mydiv {
    align-self: center;
}
</style>
</head>
<body>

<div class="box">
    <div style="background-color:#00ab55;min-height: 40px;"></div>
    <div style="background-color:#ff4842;min-height: 60px;" class="mydiv"></div>
    <div style="background-color:#ffc107;min-height: 40px;"></div>
</div>

<p><b>Note:</b> Internet Explorer 10 and earlier versions do not support the align-self property.</p>

</body>
</html>

Preview

Property Values

Value	Description
auto	This property is used to inherit the align-items property from its parent container, or stretched if there is no parent container. It is the default setting.
stretch	The default setting. Lines expand to fill the remaining space.
center	Lines are packed in the flex container's center.
flex-start	Lines are packed at the beginning of the flex container.
flex-end	Lines are packed at the end of the flex container.
baseline	Items will be positioned along the container's baseline.
initial	Returns the value of this property to its default value.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
align-self	21.0	20.0	9.0	11.0	12.1

align-items

all

CSS align-self Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us