CSS align-self Property

The align-self property aligns an item in a flex container.

This property overides the container‘s align-items value.

Example

#

Flex item 2 has an align-self value of flex-end.

1
2
3
4
5
6
7
8
9
<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>

Using align-self

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.

Syntax

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

Values

#

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.

More Examples

Click the buttons to see the different align-self values.

1
2
3
4
5
6
7
8
9
<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>

Browser support

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

You may also like

Guides