Skip to main content

align-self in CSS Flexbox – How to Layout Flex Item

align-self specifies how browsers should position selected flexible items along the flexbox's cross-axis.

note
  • align-self affects only the selected flexible item—not all the flexbox's items.
  • align-self overrides the align-items property.

The align-self property accepts the following values:

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

Let's discuss the five values.

What Is align-self: stretch in CSS Flexbox?​

stretch stretches the selected flexible items to fill the flexbox's cross-axis.

Illustration of align-self's stretch value

align-self's stretch value stretches the selected flexible items
Buy CSS Flexbox book

Here's an example:

section {
  display: flex;
  align-items: flex-start;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

.flex-item2 {
  align-self: stretch;
}

Try it on StackBlitz

We used the stretch value to stretch flex-item2 to fill the <section>'s cross-axis.

What Is align-self: flex-start in CSS Flexbox?​

flex-start aligns the selected flexible items with the cross-start edge of the flexbox's cross-axis.

Illustration of align-self&#39;s flex-start value

align-self's flex-start value aligns selected flexible items to the cross-start edge of the flexbox's cross-axis

Here's an example:

section {
  display: flex;
  align-items: center;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

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

Try it on StackBlitz

The snippet above used the flex-start value to align flex-item2 to the cross-start edge of the <section>'s cross-axis.

What Is align-self: center in CSS Flexbox?​

center aligns the selected flexible items to the center of the flexbox's cross-axis.

Illustration of align-self&#39;s center value

align-self's center value aligns the selected flexible items to the center of the flexbox's cross-axis

Here's an example:

section {
  display: flex;
  align-items: flex-start;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

.flex-item2 {
  align-self: center;
}

Try it on StackBlitz

The snippet above used the center value to align flex-item2 to the center of the <section>'s cross-axis.

What Is align-self: flex-end in CSS Flexbox?​

flex-end aligns the selected flexible items with the cross-end edge of the flexbox's cross-axis.

Illustration of align-self&#39;s flex-end value

align-self's flex-end value aligns the selected flexible items with the cross-end edge of the flexbox's cross-axis

Here's an example:

section {
  display: flex;
  align-items: flex-start;
  background-color: orange;
  margin: 10px;
  height: 300px;
}

div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

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

Try it on StackBlitz

The snippet above used the flex-end value to align flex-item2 to the cross-end edge of the <section>'s cross-axis.

What Is align-self: baseline in CSS Flexbox?​

baseline aligns the selected flexible items with the baseline of the flexbox's cross-axis.

Here's an example:

section {
  display: flex;
  align-items: flex-end;
  background-color: orange;
  margin: 10px;
  height: 470px;
}

div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

.flex-item1 {
  font-size: 1.5rem;
}

.flex-item2 {
  font-size: 3rem;
  align-self: baseline;
}

.flex-item3 {
  font-size: 0.7rem;
}

.flex-item4 {
  font-size: 5rem;
}

Try it on StackBlitz

We used the baseline value to align flex-item2 to the <section>'s baseline.

Overview​

This article discussed what a CSS align-self property is. We also discussed five of its values.

Tags:
Last updated on by Oluwatobi Sofela