CSS Align Self

CSS Align Self

The CSS align-self property controls the cross-axis alignment of an individual flex item and can override the alignment established by the flex container's align-items property.

This makes it possible to align most flex items one way while giving one or more individual items different cross-axis alignment.

How align-self Works

The align-self property is applied directly to a flex item rather than to the flex container.

.flex-container {
  display: flex;
  align-items: flex-start;
}
.special-item {
  align-self: flex-end;
}

The flex container aligns its items toward cross-start. The item with the special-item class overrides that alignment and moves toward cross-end.

The physical direction of the cross axis depends on the flex direction and writing mode, so cross-start and cross-end do not always correspond to top and bottom.

align-self Values

Common align-self values provide several ways to position an individual flex item along the cross axis.

align-self: auto

The initial value of align-self is auto.

.item {
  align-self: auto;
}

For a flex item, auto generally causes the item to use the align-items value of its flex container.

.flex-container {
  display: flex;
  align-items: center;
}
.item {
  align-self: auto;
}

The item follows the container's center alignment because it does not establish a different alignment for itself.

align-self: stretch

The stretch value allows an eligible flex item with an automatic cross size to stretch across the available cross-axis space of its flex line.

.item {
  align-self: stretch;
}

In a typical row-oriented flex container, this can make an auto-height item stretch vertically to fill the flex line's cross size.

If the item already has a definite cross size, the stretching behavior may not change that size.

align-self: flex-start

The flex-start value aligns an individual flex item toward the cross-start side of its flex line.

.item {
  align-self: flex-start;
}

In a row-oriented container using a typical horizontal writing mode, this commonly places the item toward the top of the flex line.

align-self: flex-end

The flex-end value aligns an individual flex item toward the cross-end side of its flex line.

.item {
  align-self: flex-end;
}

In a typical row layout, this commonly places the item toward the bottom of the flex line when cross-axis space is available.

align-self: center

The center value centers an individual flex item along the cross axis of its flex line.

.item {
  align-self: center;
}

Available cross-axis space is distributed on both sides of the item, positioning it in the center of the flex line.

align-self: baseline

The baseline value participates in baseline alignment, which is useful when flex items contain text with different font sizes or dimensions.

.item {
  align-self: baseline;
}

Instead of aligning the outer edges of the items, baseline alignment attempts to line up their text baselines.

align-self vs align-items

The align-items and align-self properties both control cross-axis alignment, but they are applied at different levels.

.flex-container {
  display: flex;
  align-items: center;
}
.item-2 {
  align-self: flex-start;
}

Most items are centered along the cross axis, while Item 2 is aligned toward cross-start.

Flex Direction and align-self

The align-self property always operates along the cross axis, but the physical direction of that axis depends on flex-direction.

.flex-container {
  display: flex;
  flex-direction: row;
}

With row in a typical horizontal writing mode, the cross axis is vertical, so align-self commonly controls vertical alignment.

.flex-container {
  display: flex;
  flex-direction: column;
}

With column, the cross axis follows the inline direction, so align-self commonly controls horizontal alignment.

Cross Size and stretch

Whether align-self: stretch visibly changes an item depends partly on its cross size.

.item {
  align-self: stretch;
}

An auto-sized item can stretch to use the available cross-axis space.

.item {
  height: 60px;
  align-self: stretch;
}

In a typical row-oriented layout, an explicitly defined height establishes the item's cross size, so the item does not simply stretch to fill the flex line as an auto-height item would.

Auto Margins and align-self

Auto margins on the cross axis can absorb available space and take precedence over normal cross-axis alignment for that item.

.item {
  margin-top: auto;
  align-self: flex-start;
}

In a typical row-oriented layout, the auto top margin can absorb available vertical space and push the item toward the opposite side. In cases like this, the auto margin controls the item's placement rather than align-self.

Use auto margins when the spacing behavior itself is needed, and use align-self when an individual item simply needs a different cross-axis alignment.

CSS Align Self Example

The following example gives each flex item a different align-self value while the container uses align-items: stretch. Open the example in the editor and change the values to compare their effects.

.item-1 {
  align-self: flex-start;
}
.item-2 {
  align-self: center;
}
.item-3 {
  align-self: flex-end;
}
.item-4 {
  align-self: stretch;
}