CSS Align Items

The CSS align-items property controls how Flex Items are aligned along the cross axis of a Flex Container.

While justify-content controls the main axis, align-items controls the cross axis.

Main Axis and Cross Axis

Syntax

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

Align Items Diagram

Values of align-items

1. align-items: flex-start

flex-start places Flex Items at the beginning of the cross axis.

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

Output

2. align-items: flex-end

flex-end places Flex Items at the end of the cross axis.

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

Output

3. align-items: center

center places the Flex Items in the center of the cross axis.

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

Output

4. align-items: stretch

stretch stretches Flex Items across the cross axis when their cross-axis size is not explicitly defined.

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

Output

5. align-items: baseline

baseline aligns Flex Items according to the baseline of their content, especially useful when the items contain text with different sizes.

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

Output

Comparing align-items Values

justify-content vs align-items

Example 🌍🤓

Consider a navigation bar containing a logo, menu items, and a button.

If the navigation bar uses display: flex;, the align-items: center; property can be used to vertically align these elements when the main direction is a row.

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