CSS align-self Property

CSS align-self property aligns the selected items inside the current flex line and override the align-items values.

The align-self property is one of the CSS3 properties.

The align-self property accepts the same values as the align-items property:

  • auto
  • stretch
  • flex-start
  • flex-end
  • center
  • baseline

This property will be ignored if a vertical margin of a flex item is set to "auto". The align-self property does not apply to table cells or block-level boxes.
Initial Value auto
Applies to Flex items, grid items, and absolutely-positioned boxes.
Inherited No.
Animatable No.
Version CSS3
DOM Syntax object.style.alignSelf = "auto";

Syntax

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

Example of the align-self property:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      section {
        display: flex;
        align-items: center;
        height: 120px;
        padding: 10px;
        background: #99caff;
      }
      div {
        height: 60px;
        background: #1c87c9;
        margin: 5px;
      }
      div:nth-child(1) {
        align-self: flex-start;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Align-self property example</h2>
    <p>Here the align-self for the first box is set to "flex-start".</p>
    <section>
      <div>Box #1</div>
      <div>Box #2</div>
      <div>Box #3</div>
    </section>
  </body>
</html>

Result

Here is an example where three boxes are used and the second is specified by "flex-end" value.

Example of the align-self property with the "flex-end" value:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      section {
        display: flex;
        align-items: center;
        height: 120px;
        padding: 10px;
        background: #99caff;
      }
      div {
        height: 60px;
        background: #1c87c9;
        margin: 5px;
      }
      div:nth-child(2) {
        align-self: flex-end;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Align-self property example</h2>
    <p>Here the align-self for the second box is set to "flex-end".</p>
    <section>
      <div>Box #1</div>
      <div>Box #2</div>
      <div>Box #3</div>
    </section>
  </body>
</html>

Values

Value Description Play it
auto The item inherits its parent container's align-items property. This is the default value. Play it »
stretch Makes items stretch to fit the container. Play it »
center Items are placed at the center of the container. Play it »
flex-start Items are placed at the beginning of the container. Play it »
flex-end Items are placed at the end of the container. Play it »
baseline Items are positioned at the baseline of the container. Play it »
initial It makes the property use its default value. Play it »
inherit It inherits the property from its parents element.

Browser support

29.0+
21-28 -webkit-
28.0+ 9.0+
6.1-8.0 -webkit-
12.1+

Practice Your Knowledge

The align-self property accepts the same values as the



Do you find this helpful?

Related articles