CSS align-self

The align-self property in CSS allows you to align individual flex items within a flex container along the cross axis, overriding the align-items property set on the container.

Here is how the align-self property values are used:

auto: The default value. The item inherits the value from its parent flex container.
flex-start: Aligns the item at the start of the cross axis.
flex-end: Aligns the item at the end of the cross axis.
center: Aligns the item at the center of the cross axis.
baseline: Aligns the item at the baseline of the cross axis.
stretch: Stretches the item to fill the cross axis.

Let's see some examples to understand how align-self works in practice.

Result:

Item 1

Item 2

Item 3


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

.flex-item {
  width: 100px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

The above example shows three flex items within a flex container. The second item has an align-self: flex-start; property, which aligns it at the start of the cross axis while the other items are centered.

Result:

Item 1

Item 2

Item 3


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

.flex-item {
  width: 100px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

In this example, the second item has an align-self: flex-end; property, which aligns it at the end of the cross axis while the other items are centered. By using the align-self property, you can control the alignment of individual flex items within a flex container, giving you more flexibility in your layout design.