HTML & CSS Interview Question #89

What is the difference between align-items and align-self?

CSS Layout, Display, Positioning, Flexbox & Grid Mid-Level Intermediate

Quick Interview Answer

align-items sets the default cross-axis alignment for all flex items in a flex container. align-self allows an individual flex item to override that alignment for itself.

Detailed Explanation

align-items sets the default cross-axis alignment for all flex items in a flex container. align-self allows an individual flex item to override that alignment for itself.

This is useful when most items share one alignment but a particular item needs different positioning without changing the entire container.

Code Example

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

.row .special {
    align-self: flex-start;
}