The align-self property aligns an item in a flex container.
This property overides the container‘s align-items value.
Flex item 2 has an align-self value of flex-end.
<style>
.align-self {
background-color: #776fac;
padding: 5px;
height: 500px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.align-self > div {
background-color: aliceblue;
margin: 5px;
width: 100px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="align-self">
<div>1</div>
<div style="align-self:flex-end;">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
The align-self property is applied to flex items, not the flex container.
Its value sets the item's alignment inside the flex container.
This property overides the container's align-items value.
align-self: auto | stretch | center | flex-start |
flex-end | baseline | initial | inherit;
| Value | Description |
|---|---|
| auto | Default value. Inherits its parent container's align-items property, or "stretch" if not inheritable |
| stretch | Stretch to fit the container |
| center | Position item at the center of the container |
| flex-start | Position item at the beginning of the container |
| flex-end | Position item at the end of the container |
| baseline | Position item at the baseline of the container |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different align-self values.
<style>
.flex-box {
background-color: #776fac;
padding: 5px;
height: 500px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.flex-box > div {
background-color: aliceblue;
margin: 5px;
width: 100px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-box">
<div>1</div>
<div style="align-self:center;">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
This table shows when align-self support started for each browser.
 Chrome
|
21.0 | Jul 2012 |
 Firefox
|
20.0 | Apr 2013 |
 IE/Edge
|
11.0 | Oct 2013 |
 Opera
|
12.1 | Nov 2012 |
 Safari
|
9.0 | Sep 2015 |
