Align Items

Written by Swapnil RajaUpdated 30 Jul 2026

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. The supporting concepts are explained in Justify Content and Flex Item Sizing.

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

PreviousJustify Content NextFlex Wrap

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

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;

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>

Align Items

Syntax

Attributes

Example

Browser Support

Notes

Perfect Centering Example

Visual Comparison

Conclusion