CSS Property: align-items

The align-items property defines the default alignment for items inside a flexbox or grid container. In a flexbox container, the items are aligned along the cross axis, which is vertical by default. In a grid container, items are aligned along the block axis. For this property to have any alignment effect, the items must have available space around them in the relevant direction.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>align-items</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }
        div {
            display: flex;
            align-items: center;
            width: 400px;
            height: auto;
            border: 2px solid;
            border-radius: 12px;
            padding: 10px;
            background: yellow;
        }
        div.a {
            width: 40px;
            height: 40px;
            margin: 4px;
            background: green;
            color: yellow;
            border-radius: 50%;
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), 1px 0 4px rgba(0, 0, 0, 0.2), 0 0 8px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body>
<div>
    <div class="a">1</div>
    <div class="a">2</div>
    <div class="a">3</div>
    <div class="a">4</div>
    <div class="a">5</div>
</div>
</body>
</html>

RESULT

baseline	Elements are positioned at the baseline of the container.	See example
center	Items are positioned at the center of the container.	See example
end	Items are positioned at the end of their individual grid cells in the block direction.	See example
flex-end	Items are positioned at the end of the container.	See example
flex-start	Items are positioned at the beginning of the container.	See example
inherit	Inherits the property from the parent element.	See example
initial	Sets to the default value.	See example
normal	Behaves as stretch for flexbox and grid elements.	See example
start	Items are positioned at the start of their individual grid cells in the block direction.	See example
stretch	Items are stretched to fit the container.	See example

Specifies alignment for items within a flexible container.