Align-self

Learn single item alignment with align-self.

What is align-self?

align-self changes the cross-axis alignment of a single flex item. It overrides the container's align-items value. So one item can align differently while the rest stay the same.

The values are: auto, flex-start, flex-end, center, baseline, stretch. The default is auto, which inherits the container's value.

align-self values

Each value aligns differently. flex-start places the item at the start of the cross axis, flex-end at the end. center centers it, stretch stretches it along the cross axis.

baseline aligns items by their text baseline; useful when font sizes differ. Lining up buttons in a toolbar by baseline is a common case.

Exercise Center a badge on the cross axis

Center a .badge element on the cross axis. Do not touch the .toolbar container; only add align-self: center to .badge.

Show example solution

/* center the badge */
.badge {
  align-self: center;
}

Test yourself

What is the default value of align-self?
- flex-start
- stretch
- center
- auto
Show answer

auto — Correct. The default is auto, which inherits the container's align-items value.

Write the align-self: center declaration

.cta {
  ____: center;
}

Show answer

.cta {
  align-self: center;
}

Match each value to its alignment

flex-start

Cross-axis start
flex-end

Cross-axis end
center

Center on cross axis
stretch

Stretch on cross axis

Next lesson: Gap

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies