CSS align-self Property

CSS align-self property is used to align the selected items inside the current flex line and override align-items’ values.

This property will be ignored, if any of flex items’ vertical margin is set to "auto".

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

  • auto
  • stretch
  • flex-start
  • flex-end
  • center
  • baseline
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

<!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

<!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>

Result

Values

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

Browser support

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

Practice Your Knowledge

The align-self property accepts the same values as the




Related articles