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