CSS - align-items Property

Previous
Quiz
Next

CSS align-items property collectively sets the align-self value for all immediate children. In Flexbox, it aligns items on the Cross Axis, while in Grid Layout, it aligns items on the Block Axis within their grid area.

Syntax

align-items: normal | stretch | center | flex-start | flex-end | baseline | initial | inherit;

Property Values

Value Description
normal It behaves like 'stretch' for flexbox and grid items, or 'start' for grid items with a defined block size.Default.
stretch The items are stretched to fit the container.
center The items are placed at the center position of the container.
flex-start The items are placed at the beginning position of the container.
flex-end The items are placed at the ending position of the container.
start The items are placed at the beginning of their individual grid cells, in the block direction.
end The items are placed at the end of the their individual grid cells, in the block direction.
baseline The items are placed at the baseline position of the container.
initial This sets the property to its default value.
inherit This inherits the property from the parent element.

Examples of CSS Align Items Property

The following examples describe the align-items property with different values.

Stretched Flex Items

To stretch the flex items vertically to fill the entire space of the flex container, we use the stretch value. In the following example, stretch value has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            display: flex;
            align-items: stretch;
            border: 1px dashed black;
            height: 200px;
            gap: 10px;
        }

        .flex-container div {
            background-color: grey;
            border: 2px solid black;
        }
    </style>
</head>

<body>
    <h2>CSS align-items property</h2>
    <div class="flex-container">
        <div>Flex item 1</div>
        <div>Flex item 2</div>
        <div>Flex item 3</div>
        <div>Flex item 4</div>
    </div>
</body>

</html>

Centered Flex Items

To align the flex items at the center of the cross axis of a container, we use the center value. In the following example, center value has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            display: flex;
            align-items: center;
            border: 1px dashed black;
            height: 200px;
            gap: 10px;
        }

        .flex-container div {
            background-color: grey;
            border: 2px solid black;
        }
    </style>
</head>

<body>
    <h2>CSS align-items property</h2>
    <div class="flex-container">
        <div>Flex item 1</div>
        <div>Flex item 2</div>
        <div>Flex item 3</div>
        <div>Flex item 4</div>
    </div>
</body>

</html>

Flex Items at Starting Position

To align the flex items at the start of the cross axis of a container, we use the flex-start value. In the following example, flex-start value has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            display: flex;
            align-items: flex-start;
            border: 1px dashed black;
            height: 200px;
            gap: 10px;
        }

        .flex-container div {
            background-color: grey;
            border: 2px solid black;
        }
    </style>
</head>

<body>
    <h2>CSS align-items property</h2>
    <div class="flex-container">
        <div>Flex item 1</div>
        <div>Flex item 2</div>
        <div>Flex item 3</div>
        <div>Flex item 4</div>
    </div>
</body>

</html>

Flex Items at the Ending Position

To align the flex items at the end of the cross axis of a container, we use the flex-end value. In the following example, flex-end value has been used. −

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            display: flex;
            align-items: flex-end;
            border: 1px dashed black;
            height: 200px;
            gap: 10px;
        }

        .flex-container div {
            background-color: grey;
            border: 2px solid black;
        }
    </style>
</head>

<body>
    <h2>CSS align-items property</h2>
    <div class="flex-container">
        <div>Flex item 1</div>
        <div>Flex item 2</div>
        <div>Flex item 3</div>
        <div>Flex item 4</div>
    </div>
</body>

</html>

Flex or Non-flex Items at the Starting Position

To align the flex and non-flex items at the start of the cross axis of a container, we use the start value. In the following example, grid display has been used with start value of align-items.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
            align-items: start;
            border: 1px dashed black;
            height: 200px;
        }

        .grid-item {
            background-color: grey;
            border: 2px solid black;
        }
    </style>
</head>

<body>
    <h2>CSS align-items property</h2>
    <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="grid-item">Item 2</div>
        <div class="grid-item">Item 3</div>
        <div class="grid-item">Item 4</div>
        <div class="grid-item">Item 5</div>
        <div class="grid-item">Item 6</div>
    </div>
</body>

</html>

Flex or Non-flex Items at the Ending Position

To align the flex and non-flex items at the end of the cross axis of a container, we use the end value. In the following example, grid display has been used with end value of align-it.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
            align-items: end;
            border: 1px dashed black;
            height: 200px;
        }

        .grid-item {
            background-color: grey;
            border: 2px solid black;
        }
    </style>
</head>

<body>
    <h2>CSS align-items property</h2>
    <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="grid-item">Item 2</div>
        <div class="grid-item">Item 3</div>
        <div class="grid-item">Item 4</div>
        <div class="grid-item">Item 5</div>
        <div class="grid-item">Item 6</div>
    </div>
</body>

</html>

Flex Items at Baseline

To aligns flex items along their baselines, we use the baseline value. In the following example, baseline value has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            display: flex;
            align-items: baseline;
            border: 1px dashed black;
            height: 200px;
            gap: 10px;
        }

        .flex-container div {
            background-color: grey;
            border: 2px solid black;
        }
    </style>
</head>

<body>
    <h2>CSS align-items property</h2>
    <div class="flex-container">
        <div>Flex item 1</div>
        <div>Flex item 2</div>
        <div>Flex item 3</div>
        <div>Flex item 4</div>
    </div>
</body>

</html>

Stretched Flex or Non-Flex Items by Normal

To align the flex or non-flex items to stretch vertically to fill the container, we use the normal value. In the following example, normal value has been used with non-flex items.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
            align-items: stretched;
            border: 1px dashed black;
            height: 200px;
        }

        .grid-item {
            background-color: grey;
            border: 2px solid black;
        }
    </style>
</head>

<body>
    <h2>CSS align-items property</h2>
    <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="grid-item">Item 2</div>
        <div class="grid-item">Item 3</div>
        <div class="grid-item">Item 4</div>
        <div class="grid-item">Item 5</div>
        <div class="grid-item">Item 6</div>
    </div>
</body>

</html>

Supported Browsers

Property Chrome Edge Firefox Safari Opera
align-items 57.0 16.0 52.0 10.1 44.0
css_reference.htm
Print Page
Previous
Next
Advertisements