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	从父元素继承属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS Align Content 属性示例

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

拉伸弹性项目

为了沿弹性容器的交叉轴拉伸弹性项目以填充可用空间，我们使用 stretch 值。以下示例使用 stretch 值。

示例

Open Compiler

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

示例

Open Compiler

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

示例

Open Compiler

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

示例

Open Compiler

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

示例

Open Compiler

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

示例

Open Compiler

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

示例

Open Compiler

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

打印页面