CSS align-self Property

Definition and Usage

The align-self property overrides align-items for one flex item or grid item. In a row flex, it moves that item up or down inside the line. The other items stay where the container put them.

Set it on the item, not on the container. The initial value is auto, which copies the parent's align-items. It is not inherited. To move every item the same way, use align-items. To pack extra lines, use align-content.

CSS Syntax

Property Values

How to Use align-self

Set the group with align-items. Override one item with align-self.

1. Set display: flex or display: grid on the container.
2. Give the line a cross size you can see. For a row flex, that is usually height.
3. Set align-items on the container for the items that should match.
4. Set align-self on the one item that should differ. A fixed height on that item blocks stretch.

Live Preview

The row uses align-items: flex-start. Only the blue item uses align-self.

CSS Examples

Each snippet sets the group with align-items, then overrides one item. Use Try It Yourself for a live editor.

<style>
  section {
    display: flex;
    align-items: flex-start;
    height: 120px;
    border: 1px solid #ccc;
  }
  div {
    height: 40px;
    border: 1px solid #999;
  }
  .pick {
    align-self: flex-end;
  }
</style>

<section>
  <div>One</div>
  <div class="pick">Two</div>
  <div>Three</div>
</section>

<style>
  section {
    display: flex;
    align-items: flex-start;
    height: 120px;
    border: 1px solid #ccc;
  }
  div {
    height: 40px;
    border: 1px solid #999;
  }
  .pick {
    align-self: center;
  }
</style>

<section>
  <div>One</div>
  <div class="pick">Two</div>
  <div>Three</div>
</section>

<style>
  section {
    display: flex;
    align-items: flex-start;
    height: 120px;
    border: 1px solid #ccc;
  }
  div {
    height: 40px;
    border: 1px solid #999;
  }
  .pick {
    height: auto;
    align-self: stretch;
  }
</style>

<section>
  <div>One</div>
  <div class="pick">Two</div>
  <div>Three</div>
</section>

Key Takeaways