CSS Flexbox

Align Items

The align-items property is used to control the alignment of flex items along the cross axis of a flex container.

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

For a flex container with:

css

flex-direction: row;

Main Axis -> Horizontal
Cross Axis -> Vertical

The align-items property is commonly used to center items vertically, align them at the top or bottom, or stretch them to fill available space.

Syntax

Align Items Syntax

css

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

Align Items Example

css

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

This vertically centers all flex items inside the flex container.

Attributes

Value	Description	Example
stretch	Default. Stretches items to fill container	align-items: stretch;
flex-start	Aligns items at the start of cross axis	align-items: flex-start;
center	Centers items on cross axis	align-items: center;
flex-end	Aligns items at the end of cross axis	align-items: flex-end;
baseline	Aligns items based on text baseline	align-items: baseline;

Example

Align Items Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>Align Items Example</title>
    <style>
        .container {
            display: flex;
            align-items: center;
            height: 200px;
            border: 2px solid black;
            gap: 10px;
        }
        .item {
            background-color: lightblue;
            padding: 20px;
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

Output

Browser Output

css

A container with a height of 200px will appear
All three items will be vertically centered within the container
The items will remain arranged in a horizontal row

-------------------------
|                       |
|   Item1 Item2 Item3  |
|                       |
-------------------------

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Partial

Notes

align-items works along the cross axis.
For flex-direction: row, it controls vertical alignment.
For flex-direction: column, it controls horizontal alignment.
It only affects flex items inside a flex container.
Frequently combined with justify-content for perfect centering.

Perfect Centering Example

css

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

Centers content both horizontally and vertically.

Visual Comparison

flex-start

text

Item1 Item2 Item3
-----------------

center

text

-----------------
Item1 Item2 Item3
-----------------

flex-end

text

-----------------
                 Item1 Item2 Item3

stretch

text

[Item1][Item2][Item3]

Conclusion

The align-items property controls how flex items are aligned along the cross axis. Whether you need top alignment, bottom alignment, stretching, or perfect vertical centering, align-items provides a simple and powerful solution for modern Flexbox layouts.

PreviousJustify Content NextFlex Wrap