CSS - align-content Property

Quiz

CSS align-content property is used to align the content of a flex container along the cross-axis or a grid's block axis. It applies to flex containers with multiple lines of flex items.

The property align-content has no effect on single line flex containers (flex-wrap: nowrap).

Syntax

align-content: stretch | center | flex-start | flex-end | space-between | space-around | space-evenly | initial | inherit;

Property Values

Value	Description
stretch	The lines are stretched to take up the remaining space.Default value.
center	The lines are packed towards the center of the flex container.
flex-start	The lines are packed towards the start of the flex container.
flex-end	The lines are packed towards the end of the flex container.
space-between	The lines are evenly distributed within the flex container.
space-around	The lines are evenly distributed in the flex container. Half-size spaces on either end.
space-evenly	The lines are evenly distributed in the flex container. Equal space around them.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Align Content Property

The following examples explain the align-content property with different values.

Stretched Flex Items

To stretches the flex items along the cross-axis of the flex container to fill the available space, we use the stretch value. The following example uses the stretch value.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            display: flex;
            border:1px solid black;
            height: 200px;
            flex-wrap: wrap;
            align-content: stretch;
            gap:50px;
            padding:5px;
        }

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

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

</html>

Centering Flex Items

To align the flex items to the center of the cross axis of a flex container, we use the center value. The following example shows uses the center value.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            display: flex;
            border: 1px solid black;
            height: 350px;
            flex-wrap: wrap;
            align-content: center;
            gap:10px;
        }

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

<body>
    <h2>CSS align-content 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>Flex item 5</div>
        <div>Flex item 6</div>
        <div>Flex item 7</div>
    </div>
</body>

</html>

Flex Items to the Start of Flex Container

To align the flex items to the start of the cross axis of a flex container, we use the start value. The following example shows uses the start value.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            display: flex;
            border:1px solid black;
            height: 350px;
            flex-wrap: wrap;
            align-content: flex-start;
            gap:10px;
        }

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

<body>
    <h2>CSS align-content 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>Flex item 5</div>
        <div>Flex item 6</div>
        <div>Flex item 7</div>
    </div>
</body>

</html>

Flex Items to the End of Flex Container

To align the flex items to the end of the cross axis of a flex container, we use the end value. The following example shows uses the end value.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            display: flex;
            border:1px solid black;
            height: 350px;
            flex-wrap: wrap;
            align-content: flex-end;
            gap:10px;
        }

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

<body>
    <h2>CSS align-content 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>Flex item 5</div>
        <div>Flex item 6</div>
        <div>Flex item 7</div>
    </div>
</body>

</html>

Space Between Flex Items

To evenly distribute space between the flex items along the cross axis of a flex container, we use the space between value. The following example uses space between value.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            display: flex;
            border:1px solid black;
            height: 350px;
            flex-wrap: wrap;
            align-content: space-between;
            gap:10px;
        }

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

<body>
    <h2>CSS align-content 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>Flex item 5</div>
        <div>Flex item 6</div>
        <div>Flex item 7</div>
    </div>
</body>

</html>

Space Around Flex Items

To distributee the flex items within a flex container with equal space around each item, we use the space around value. The following example uses the space around value.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            display: flex;
            border:1px solid black;
            height: 350px;
            flex-wrap: wrap;
            align-content: space-around;
            gap:10px;
        }

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

<body>
    <h2>CSS align-content 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>Flex item 5</div>
        <div>Flex item 6</div>
        <div>Flex item 7</div>
    </div>
</body>

</html>

Even Space Between and Around Flex Items

To evenly distributes the space around and between the flex items along the cross axis of a flex container, we use the space evenly value. The following example uses the space evenly value.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            display: flex;
            border:1px solid black;
            height: 300px;
            flex-wrap: wrap;
            align-content: space-evenly;
            gap:10px;
        }

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

<body>
    <h2>CSS align-content 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>Flex item 5</div>
        <div>Flex item 6</div>
    </div>
</body>

</html>

Supported Browsers

Property
align-content	57.0	16.0	52.0	10.1	44.0

css_reference.htm

Print Page