CSS 弹性容器

Flex 容器是一个父元素，其子元素称为 flex 项目。

在下图的示例中，紫色容器是一个 flex 容器，包含三个用橙色框表示的 flex 项目。

这些 flex 项目是使用不同的 flex 容器属性进行排列和对齐的。

flexbox 布局模型在开始使用任何基于 flex 的属性之前，需要一个 flex 容器。带有 `flex` 值的 `display` 属性可以将元素设置为 flex 容器。

<!-- A div element (flex container) having 
three paragraphs (flex items)  →
<div>
    <p>First Item</p>
    <p>Second Item</p>
    <p>Third Item</p>
</div>

/* CSS */
div {
    display: flex;
}

在这里，`display: flex` 将 `div` 元素设置为 flex 容器。 `div` 元素内的所有直接子元素都称为 flex 项目。

flex 容器内的空间分布和对齐通过以下属性进行调整。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
gap, row-gap, column-gap

我们将逐一介绍以上每个 flex 容器属性。

Flex 方向

`flex-direction` 属性指定 flex 项目在 flex 容器内的方向。

`flex-direction` 属性的可能值有 `row`（默认值）、`row-reverse`、`column` 和 `column-reverse`。

让我们来看一下这些值。

flex-direction: row

`row` 值从左到右水平排列 flex 项目。例如，

HTML

CSS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS flex-direction</title>
    </head>

    <body>
        <h2>flex-direction: row (default)</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
    </body>

</html>

div.container {
    display: flex;
    flex-direction: row;

    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 40px;
    height: 40px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

浏览器输出

CSS Flex-Direction 的值

flex-direction: row-reverse

`row-reverse` 值水平排列 flex 项目，但顺序相反。例如，

HTML

CSS

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS flex-direction</title>
    </head>

    <body>
        <h2>flex-direction: row-reverse</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
    </body>
</html>

div.container {
    display: flex;
    flex-direction: row-reverse;

    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 40px;
    height: 40px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

浏览器输出

flex-direction: column

`column` 值从上到下垂直排列 flex 项目。例如，

HTML

CSS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS flex-direction</title>
    </head>

    <body>
        <h2>flex-direction: column</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
        </div>
    </body>

</html>

div.container {
    display: flex;
    flex-direction: column;

    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 40px;
    height: 40px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

浏览器输出

flex-direction: column-reverse

`column-reverse` 值垂直排列 flex 项目，但顺序相反。例如，

HTML

CSS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS flex-direction</title>
    </head>

    <body>
        <h2>flex-direction: column-reverse</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
        </div>
    </body>

</html>

div.container {
    display: flex;

    /* reverses the items in column */
    flex-direction: column-reverse;

    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 40px;
    height: 40px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;

/* sets the margin around each flex item */
    margin: 4px;
}

浏览器输出

Flex 换行

`flex-wrap` 值允许 flex 项目在多行中换行。默认情况下，所有 flex 项目都被压缩在单个水平方向（row）中。

`flex-wrap` 属性的可能值有 `nowrap`（默认值）、`wrap` 和 `wrap-reverse`。

让我们来看一下这些值。

flex-wrap: nowrap

`flex-wrap` 属性的 `nowrap` 值会将 flex 项目保持在 `flex-direction` 设置的方向上。例如，

HTML

CSS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS flex-wrap</title>
    </head>

    <body>
        <h2>flex-wrap: nowrap</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
            <div class="box">6</div>
            <div class="box">7</div>
            <div class="box">8</div>
            <div class="box">9</div>
            <div class="box">10</div>
            <div class="box">11</div>
            <div class="box">12</div>
        </div>

    </body>
</html>

div.container {
    display: flex;
    flex-direction: row;

    /* prevents wrapping of flex items; default value */
    flex-wrap: nowrap;

    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 80px;
    height: 60px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

浏览器输出

在这里，所有 flex 项目都被压缩在水平方向上，并且忽略了它们的原始宽度。

CSS Flex-Wrap 的值

flex-wrap: wrap

`wrap` 值允许 flex 项目在容器大小不足时自动换行到多行。例如，

HTML

CSS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS flex-wrap</title>
    </head>

    <body>
        <h2>flex-wrap: wrap</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
            <div class="box">6</div>
            <div class="box">7</div>
            <div class="box">8</div>
            <div class="box">9</div>
            <div class="box">10</div>
            <div class="box">11</div>
            <div class="box">12</div>
        </div>
    </body>

</html>

div.container {
    display: flex;
    flex-direction: row;

    /* wraps the flex items in multiple line */
    flex-wrap: wrap;

    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 80px;
    height: 60px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

浏览器输出

flex-wrap: wrap-reverse

`wrap-reverse` 值会换行 flex 项目，但顺序相反。例如，

HTML

CSS

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS flex-wrap</title>
    </head>

    <body>
        <h2>flex-wrap: wrap-reverse</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
            <div class="box">6</div>
            <div class="box">7</div>
            <div class="box">8</div>
            <div class="box">9</div>
            <div class="box">10</div>
            <div class="box">11</div>
            <div class="box">12</div>
        </div>
    </body>
</html>

div.container {
    display: flex;
    flex-direction: row;

    /* wraps the flex items in multiple lines */
    flex-wrap: wrap-reverse;

    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 80px;
    height: 60px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

浏览器输出

Flex Flow

`flex-flow` 是一个简写属性，用于指定 `flex-direction` 和 `flex-wrap` 属性值。例如，

HTML

CSS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS flex-flow</title>
    </head>

    <body>
        <h2>flex-flow: row wrap</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
            <div class="box">6</div>
            <div class="box">7</div>
            <div class="box">8</div>
            <div class="box">9</div>
            <div class="box">10</div>
            <div class="box">11</div>
            <div class="box">12</div>
        </div>

    </body>
</html>

div.container {
    display: flex;

    /* sets the flex-direction to row and flex-wrap to wrap value */
    flex-flow: row wrap;

    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 80px;
    height: 60px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

浏览器输出

Justify Content

`justify-content` 属性用于沿主轴在 flex 项目之间分配可用空间。

对于 `flex-direction: row`，空间是水平分布的；对于 `flex-direction: column`，空间是垂直分布的。

`justify-content` 属性的可能值有 `flex-start`、`center`、`flex-end`、`space-between`、`space-around` 和 `space-evenly`。

让我们来看一下这些值。

justify-content: flex-start

`flex-start` 值在主轴的开始对齐 flex 项目（对于 `flex-direction: row/row-reverse` 是左侧，对于 `flex-direction: column/column-reverse` 是顶部）。

让我们看一个例子。

HTML

CSS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS justify-content</title>
    </head>

    <body>
        <h2>justify-content: flex-start</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
    </body>

</html>

div.container {
    display: flex;

    /* default value */
    justify-content: flex-start;

    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 40px;
    height: 40px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

浏览器输出

CSS Justify-Content 的值

justify-content: center

`center` 值在主轴的中心对齐 flex 项目。例如，

HTML

CSS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS justify-content</title>
    </head>

    <body>
        <h2>justify-content: center</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
    </body>

</html>

div.container {
    display: flex;
    justify-content: center;
    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 40px;
    height: 40px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

浏览器输出

justify-content: flex-end

`flex-end` 值在主轴的结束对齐 flex 项目（对于 `flex-direction: row/row-reverse` 是右侧，对于 `flex-direction: column/column-reverse` 是底部）。

让我们看一个例子。

HTML

CSS

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS justify-content</title>
    </head>

    <body>
        <h2>justify-content: flex-end</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
    </body>
</html>

div.container {
    display: flex;
    justify-content: flex-end;
    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 40px;
    height: 40px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

浏览器输出

justify-content: space-between

`space-between` 值将第一个项目对齐到 flex 容器的起始边缘（main-start），并将最后一个项目对齐到结束边缘（main-end）。剩余的空间将在 flex 项目之间平均分配。

让我们看一个例子。

HTML

CSS

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS justify-content</title>
    </head>

    <body>
        <h2>justify-content: space-between</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
    </body>
</html>

div.container {
    display: flex;
    justify-content: space-between;
    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 40px;
    height: 40px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

浏览器输出

justify-content: space-around

`space-around` 值在项目之间平均分配空间。但是，第一个项目之前和最后一个项目之后各有半份空间。例如，

HTML

CSS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS justify-content</title>
    </head>

    <body>
        <h2>justify-content: space-around</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
    </body>

</html>

div.container {
    display: flex;
    justify-content: space-around;
    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 40px;
    height: 40px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

浏览器输出

justify-content: space-evenly

`space-evenly` 值在 flex 项目之间平均分配空间。例如，

HTML

CSS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS justify-content</title>
    </head>

    <body>
        <h2>justify-content: space-evenly</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
    </body>

</html>

div.container {
    display: flex;
    justify-content: space-evenly;
    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 40px;
    height: 40px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

浏览器输出

Align Items

`align-items` 属性沿交叉轴在 flex 项目之间分配可用空间。

对于 `flex-direction: row`，空间是垂直分布的；对于 `flex-direction: column`，空间是水平分布的。

`align-items` 属性的可能值有 `flex-start`（默认值）、`center`、`flex-end`、`baseline` 和 `stretch`。

让我们来看一下这些值。

align-items: flex-start

`flex-start` 值在交叉轴的开始对齐 flex 项目（对于 `flex-direction: row/row-reverse` 是顶部，对于 `flex-direction: column/column-reverse` 是左侧）。

让我们看一个例子。

HTML

CSS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS align-items</title>
    </head>

    <body>
        <h2>align-items: flex-start</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
    </body>

</html>

div.container {
    height: 160px;
    display: flex;
    align-items: flex-start;
    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 40px;
    height: 40px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

浏览器输出

注意：当 `flex-direction` 设置为 `row` 时，设置 flex 容器的高度非常重要。如果没有高度，flex 项目将没有空间进行对齐，也不会显示任何效果。

CSS Align-Items 的值

align-items: center

`center` 值在交叉轴的中心对齐 flex 项目。例如，

HTML

CSS

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS align-items</title>
    </head>

    <body>
        <h2>align-items: center</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
    </body>
</html>

div.container {
    height: 160px;
    display: flex;
    align-items: center;
    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 40px;
    height: 40px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

浏览器输出

align-items: flex-end

`flex-end` 值在交叉轴的结束对齐 flex 项目。例如，

HTML

CSS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS align-items</title>
    </head>

    <body>
        <h2>align-items: flex-end</h2>
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
    </body>

</html>

div.container {
    height: 160px;
    display: flex;
    align-items: flex-end;
    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 40px;
    height: 40px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

浏览器输出

align-items: baseline

`baseline` 值沿项目的基线对齐 flex 项目。这意味着所有 flex 项目中的文本将对齐到同一行。

让我们看一个例子。

HTML

CSS

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS align-items</title>
    </head>

    <body>
        <h2>align-items: baseline</h2>
        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
        </div>
    </body>
</html>

div.container {
    height: 160px;
    display: flex;

    /* arranges the flex items with respective to baseline of flex items */
    align-items: baseline;

    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 40px;
    height: 40px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

div.box3 {
    width: 90px;
    height: 90px;

    /* sets the line-height */
    line-height: 70px;
    background-color: skyblue;
}

div.box4 {
    width: 100px;
    height: 100px;

    /* sets the line-height */
    line-height: 140px;
    background-color: greenyellow;
}

浏览器输出

在上面的示例中，首先对齐 flex 项目的基线，然后将 flex 项目对齐到同一基线上。

注意：基线是一条假想的水平线，大多数字符的底部都坐落在这条线上。

align-items: stretch

`stretch` 值将 flex 项目拉伸以填充交叉轴上的容器。例如，

HTML

CSS

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS align-items</title>
    </head>

    <body>
        <h2>align-items: stretch</h2>
        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
        </div>
    </body>
</html>

div.container {
    height: 160px;
    display: flex;

    /* stretches the flex items */
    align-items: stretch;

    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 40px;

    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

浏览器输出

在上面的示例中，flex 项目被拉伸以垂直填充容器。

请注意，我们没有为 flex 项目设置 `height`。如果我们设置了 flex 项目的高度，`align-items: stretch` 将不起作用，flex 项目将保持指定的高度。

如果为 flex 项目设置了特定的高度，`align-items: stretch` 属性将不会对这些项目产生任何影响。项目将保持其指定的高度，而不会发生拉伸。

Align Content

`align-content` 属性控制当交叉轴有额外空间时 flex 行的对齐。

`align-content` 属性的可能值有 `normal`（默认）、`flex-start`、`flex-end`、`center`、`space-between`、`space-around`、`space-evenly` 和 `stretch`。

让我们逐一来看一下这些值。

align-content: flex-start

`flex-start` 值在交叉轴的开始对齐 flex 行（对于 `flex-direction: row/row-reverse` 是顶部，对于 `flex-direction: column/column-reverse` 是左侧）。

让我们看一个例子。

HTML

CSS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS align-content</title>
    </head>

    <body>
        <h2>align-content: flex-start</h2>
        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
            <div class="box box6">6</div>
            <div class="box box7">7</div>
            <div class="box box8">8</div>
            <div class="box box9">9</div>
            <div class="box box10">10</div>
            <div class="box box11">11</div>
        </div>
    </body>

</html>

 div.container {
    height: 180px;
    display: flex;

    /* setting a flex-wrap value is important */
    flex-wrap: wrap;

    /* aligns the flex lines to the flex-start */
    align-content: flex-start;

    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 80px;
    height: 40px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

浏览器输出

注意：`align-content` 属性仅影响多行 flex 容器中 flex 项目的对齐。如果 flex 容器是单行（即 `flex-wrap` 属性设置为 `no-wrap`），则 `align-content` 属性将不起作用。

CSS Align-Content 的值

align-content: center

`center` 值在 flex 容器的中心对齐 flex 行。例如，

HTML

CSS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS align-content</title>
    </head>

    <body>
        <h2>align-content: center</h2>
        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
            <div class="box box6">6</div>
            <div class="box box7">7</div>
            <div class="box box8">8</div>
            <div class="box box9">9</div>
            <div class="box box10">10</div>
            <div class="box box11">11</div>
        </div>
    </body>

</html>

div.container {
    height: 180px;
    display: flex;

    /* setting a flex-wrap value is important */
    flex-wrap: wrap;

    /* aligns the flex lines in the center*/
    align-content: center;

    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 80px;
    height: 40px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

浏览器输出

align-content: flex-end

`flex-end` 值在交叉轴的结束对齐 flex 项目。例如，

HTML

CSS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS align-content</title>
    </head>

    <body>
        <h2>align-content: flex-end</h2>
        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
            <div class="box box6">6</div>
            <div class="box box7">7</div>
            <div class="box box8">8</div>
            <div class="box box9">9</div>
            <div class="box box10">10</div>
            <div class="box box11">11</div>
        </div>
    </body>

</html>

div.container {
    height: 180px;
    display: flex;
    /* setting a flex-wrap value is important */
    flex-wrap: wrap;

    /* aligns the flex lines in the end*/
    align-content: flex-end;

    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 80px;
    height: 40px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

浏览器输出

align-content: space-between

`space-between` 值在 flex 容器的行之间平均分配空间。第一行从起始边缘开始，最后一行在结束边缘结束。

让我们看一个例子。

HTML

CSS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS align-content</title>
    </head>

    <body>
        <h2>align-content: space-between</h2>
        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
            <div class="box box6">6</div>
            <div class="box box7">7</div>
            <div class="box box8">8</div>
            <div class="box box9">9</div>
            <div class="box box10">10</div>
            <div class="box box11">11</div>
        </div>
    </body>

</html>

div.container {
    height: 180px;
    display: flex;

    /* setting a flex-wrap value is important */
    flex-wrap: wrap;

    /* aligns the flex lines in the end*/
    align-content: space-between;

    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 80px;
    height: 40px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

浏览器输出

align-content: space-around

`space-around` 值在 flex 项目的行之间平均分配空间。但是，第一行之前和最后一行之后各有半份空间。

让我们看一个例子。

HTML

CSS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS align-content</title>
    </head>

    <body>
        <h2>align-content: space-around</h2>
        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
            <div class="box box6">6</div>
            <div class="box box7">7</div>
            <div class="box box8">8</div>
            <div class="box box9">9</div>
            <div class="box box10">10</div>
            <div class="box box11">11</div>
        </div>
    </body>

</html>

div.container {
    height: 180px;
    display: flex;
    /* setting a flex-wrap value is important */
    flex-wrap: wrap;
    align-content: space-around;
    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 80px;
    height: 40px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

浏览器输出

align-content: space-evenly

`space-evenly` 值在 flex 行之间以及周围平均分配空间。例如，

HTML

CSS

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS align-content</title>
    </head>

    <body>
        <h2>align-content: space-evenly</h2>
        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
            <div class="box box6">6</div>
            <div class="box box7">7</div>
            <div class="box box8">8</div>
            <div class="box box9">9</div>
            <div class="box box10">10</div>
            <div class="box box11">11</div>
        </div>
    </body>
</html>

div.container {
    height: 180px;
    display: flex;
    /* setting a flex-wrap value is important */
    flex-wrap: wrap;
    align-content: space-evenly;
    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 80px;
    height: 40px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

浏览器输出

align-content: stretch

`stretch` 值将 flex 行拉伸以填充交叉轴上的容器。例如，

HTML

CSS

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS align-content</title>
    </head>

    <body>
        <h2>align-content: stretch</h2>
        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
            <div class="box box6">6</div>
            <div class="box box7">7</div>
            <div class="box box8">8</div>
            <div class="box box9">9</div>
            <div class="box box10">10</div>
            <div class="box box11">11</div>
        </div>
    </body>
</html>

div.container {
    height: 180px;
    display: flex;
    /* setting a flex-wrap value is important */
    flex-wrap: wrap;
    align-content: stretch;
    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 80px;

    text-align: center;
    border: 1px solid black;
    background-color: orange;
    margin: 4px;
}

浏览器输出

在上面的示例中，flex 行被拉伸以垂直填充容器。

请注意，我们没有为 flex 项目设置 `height`。

如果为 flex 项目设置了特定的高度，`align-content: stretch` 属性将不会对这些项目产生任何影响。flex 行将保持其指定的 flex 项目高度，而不会发生拉伸。

Flex 项目之间的间距

`row-gap` 和 `column-gap` 属性控制 flex 容器内 flex 项目之间的间距。

让我们逐一来看一下。

CSS row-gap 属性

`row-gap` 属性设置跨越交叉轴的 flex 项目行之间的间距。例如，

HTML

CSS

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS row-gap</title>
    </head>

    <body>
        <h2>row-gap: 20px</h2>
        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
            <div class="box box6">6</div>
            <div class="box box7">7</div>
            <div class="box box8">8</div>
            <div class="box box9">9</div>
            <div class="box box10">10</div>
            <div class="box box11">11</div>
        </div>
    </body>
</html>

div.container {
    height: 180px;
    display: flex;
    flex-wrap: wrap;

    /* creates a gap of 20px */
    row-gap: 20px;

    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 70px;
    height: 70px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
}

浏览器输出

CSS column-gap 属性

`column-gap` 属性设置跨越主轴的 flex 项目列之间的间距。例如，

HTML

CSS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS column-gap</title>
    </head>

    <body>
        <h2>column-gap: 20px</h2>
        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
            <div class="box box6">6</div>
            <div class="box box7">7</div>
            <div class="box box8">8</div>
            <div class="box box9">9</div>
            <div class="box box10">10</div>
            <div class="box box11">11</div>
        </div>
    </body>

</html>

div.container {
    height: 180px;
    display: flex;
    flex-wrap: wrap;

    /* creates a gap of 20px */
    column-gap: 20px;

    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 70px;
    height: 70px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
}

浏览器输出

CSS gap 属性

`gap` 是一个简写属性，允许设置 flex 项目之间的行和列间距。例如，

gap: 20px; //creates a gap of 20px between rows and columns
gap: 10px 20px; //creates a row gap of 10px and a column gap of 20px

让我们来看一个完整的示例。

HTML

CSS

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS gap</title>
    </head>

    <body>
        <h2>gap: 40px</h2>
        <div class="container">
            <div class="box box1">1</div>
            <div class="box box2">2</div>
            <div class="box box3">3</div>
            <div class="box box4">4</div>
            <div class="box box5">5</div>
            <div class="box box6">6</div>
            <div class="box box7">7</div>
            <div class="box box8">8</div>
            <div class="box box9">9</div>
            <div class="box box10">10</div>
            <div class="box box11">11</div>
        </div>
    </body>
</html>

div.container {
    height: 180px;
    display: flex;
    flex-wrap: wrap;

    /* creates 40px gap between rows and columns */
    gap: 40px;

    border: 2px solid black;
    background-color: purple;
}

div.box {
    width: 60px;
    height: 60px;
    text-align: center;
    border: 1px solid black;
    background-color: orange;
}

浏览器输出

热门教程

热门实例

参考资料

认证课程

成为一名认证的 Python程序员。

热门教程

参考资料

热门实例

CSS 简介

组合器和选择器

CSS 字体

文本格式化

CSS 背景

CSS 渐变

CSS 边框

CSS 盒模型

显示和定位

CSS 浮动布局

CSS 弹性盒

CSS 网格

CSS 响应式设计

CSS 过渡、变换和动画

样式化元素

CSS 项目

网页教程

CSS 弹性容器

Flex 方向

flex-direction: row

CSS Flex-Direction 的值

Flex 换行

flex-wrap: nowrap

CSS Flex-Wrap 的值

Flex Flow

Justify Content

justify-content: flex-start

CSS Justify-Content 的值

Align Items

align-items: flex-start

CSS Align-Items 的值

Align Content

align-content: flex-start

CSS Align-Content 的值

Flex 项目之间的间距

CSS row-gap 属性

CSS column-gap 属性

CSS gap 属性

目录

相关教程

成为一名认证的 Python
程序员。