CSS - align-content 屬性

CSS align-content 屬性用於沿交叉軸（或網格的塊軸）對齊彈性容器的內容。它適用於包含多行彈性專案的彈性容器。

對於單行彈性容器 (flex-wrap: nowrap)，align-content 屬性無效。

語法

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

屬性值

值	描述
stretch	行被拉伸以佔據剩餘空間。預設值。
center	行被壓縮到彈性容器的中心。
flex-start	行被壓縮到彈性容器的起始位置。
flex-end	行被壓縮到彈性容器的結束位置。
space-between	行在彈性容器內平均分佈。
space-around	行在彈性容器內平均分佈。兩端各留有半個間距。
space-evenly	行在彈性容器內平均分佈。它們周圍有相等的間距。
initial	將屬性設定為其預設值。
inherit	從父元素繼承屬性。

CSS Align Content 屬性示例

以下示例解釋了具有不同值的align-content 屬性。

拉伸彈性專案

為了沿彈性容器的交叉軸拉伸彈性專案以填充可用空間，我們使用 stretch 值。以下示例使用 stretch 值。

示例

<!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>

居中彈性專案

要將彈性專案與彈性容器交叉軸的中心對齊，我們使用 center 值。以下示例使用 center 值。

示例

<!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>

將彈性專案對齊到彈性容器的起始位置

要將彈性專案與彈性容器交叉軸的起始位置對齊，我們使用 start 值。以下示例使用 start 值。

示例

<!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>

將彈性專案對齊到彈性容器的結束位置

要將彈性專案與彈性容器交叉軸的結束位置對齊，我們使用 end 值。以下示例使用 end 值。

示例

<!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 值。以下示例使用 space-between 值。

示例

<!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 值。以下示例使用 space-around 值。

示例

<!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>

彈性專案之間和周圍的均勻間距

要在彈性容器的交叉軸上平均分配彈性專案周圍和之間的空間，我們使用 space-evenly 值。以下示例使用 space-evenly 值。

示例

<!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>

支援的瀏覽器

屬性
align-content	57.0	16.0	52.0	10.1	44.0

css_properties_reference.htm

列印頁面