Flexbox 是一个有用的工具，用于为网页创建美观且响应式的布局。在本指南中，你将学习像专业人士一样开始使用 CSS Flexbox 所需的一切知识。我们还将学习大量练习示例。

如果你是初学者 web 开发人员，本指南对你来说是一份完美的资源。如果你是经验丰富的开发人员，想要提高响应式网页设计技能，它也会很有用。

目录

• 什么是 Flexbox
• 使用 Flexbox 有什么好处
• 主轴和交叉轴
• Flex 容器和 Flex 项
• 了解 Flex 和 Inline-flex
• display: flex
• display: inline-flex
• Flex 容器属性
• flex-direction 属性
• flex-wrap 属性
• flex-flow 缩写属性
• justify-content 属性
• Talign-items 属性
• align-content 属性
• place-content 属性
• Flex 项属性
• order 属性
• align-self 属性
• flex-grow 属性
• flex-shrink 属性
• flex-basis 属性
• flex 缩写属性
• Flexbox 间隙
• 如何使用 Flexbox 将元素居中
• 通过 Flexbox 游戏练习
• CSS Flexbox 中有 Bug 吗
• 总结

什么是 Flexbox

Flexbox 是“Flexible Box Layout”的缩写。它是一个 CSS 布局模型，可以简化复杂布局的创建。它提供了一种灵活的方式来对齐元素并在容器元素内分配空间。

Flexbox 布局模型是双向的。这意味着你可以按行、列或两者排列元素。稍后会详细介绍。

使用 Flexbox 有什么好处

在 Flexbox 出现之前，创建复杂的布局和响应式网页非常艰难。你需要 CSS 浮动和位置属性的组合。这需要许多变通方法和技巧。

但使用 Flexbox，你现在可以面对更少的困难，使用更少的代码行数来实现以下操作：

• 使用justify-content 和 align-items 等属性对齐和居中元素。
• 无需编写大量媒体查询即可开发响应式布局。
• 在不改变 HTML 结构的情况下重新排序元素。
• 创建相同高度的列，无需任何额外的 HTML 元素或背景图片。

现在，你了解了 Flexbox 是什么，以及可以使用它做的一些事情。让我们看看你如何使用它。

主轴和交叉轴

关于 Flexbox，你首先需要了解的是轴的概念。每个 Flex 容器（ display 属性设置为 flex 或 inline-flex 的元素）都有一个主轴和一个交叉轴。

主轴是水平的还是垂直的，具体取决于 flex-direction 的值。如果你不熟悉 flex-direction , 不用担心。你即将学会它。

flex-direction 为 row 时的交叉轴和主轴

在这个示例中，主轴是水平的，交叉轴是垂直的。

以下是主轴垂直且交叉轴水平的示例。

flex-direction 为 column 时的主轴和交叉轴

Flex 容器和 Flex 项

要使用 Flexbox 的所有属性，你需要将元素的 display 属性设置为 flex 或 inline-flex。

这会将元素变成 flex 容器，并且该元素的子元素变成 flex 项。

举个例子:

<section class="container">  
	<div>Flex Item 1</div>  
    <div>Flex Item 2</div>  
    <div>    
    	<p>This paragraph is not a flex item</p>  
    </div>
</section>

.container {  
  display: flex;
}

.container 元素现在是一个 Flex 容器。这三个 div 元素是 .container 元素的直接子元素，这使得它们成为 Flex 项。

但第三个 div 内的段落元素不是 Flex 项。这是因为它不是 .container 元素的直接子元素。

了解 Flex 和 Inline-flex

你可以使用 flex 和 inline-flex 使元素成为 Flex 容器。不同之处在于它们与周围元素的交互方式。

display: flex

这使得 Flex 容器的行为类似块级元素。Flex 容器占据其父元素的整个可用宽度。它会在新的一行开始，并且其后的元素也会在新的一行开始。

例如:

<button>Button One</button>

/* Flex Container */
<section class="container">  
	<div id="red"></div>  
	<div id="gold"></div>  
	<div id="green"></div>
</section>

<button>Button Two</button>

.container {
	display: flex;
}

当你使用 display: flex 时，Flex 容器的行为类似于块元素`

.container 元素占据了主体（其父元素）的整个可用宽度。

display: inline-flex

这使得 Flex 容器的行为就像一个内联元素。这允许其他内联元素（如按钮）与其并排。使用前面的示例，这就是当你将 display 从 flex 更改为 inline-flex 时元素的排列方式。

当你使用 display: inline-flex 时，Flex 容器的行为类似于 inline-elements。

Flex 容器不占据其父容器的整个宽度。它仅使用其内容所需的水平空间。

在 StackBlitz 上 练习使用 flex 和 inline-flex

Flex 容器属性

Flex 容器属性允许你控制 Flex 容器内 Flex 项的布局和对齐方式。

注意: 你可以将这些属性应用于 Flex 容器，而不是 Flex 项。

以下是 Flex 容器属性:

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content
• place-content

flex-direction 属性

flex-direction 属性定义了 Flex 项的显示方向。它设置了 Flex 容器的主轴。该属性可以采用以下四个值中的任意一个：

• row (默认值)
• column
• row-reverse
• column-reverse

现在，让我们看一些示例，看看它是如何工作的。

在下面的代码片段中，我们有一个名为 names-container 的容器，其中包含四个名字：

<div class="names-container">  
	<p id="jill">1. JILL</p>  
	<p id="john">2. JOHN</p>  
	<p id="jane">3. JANE</p>  
	<p id="jack">4. JACK</p>
</div>

让我们看看使用 flex-direction 属性来排列这些名字的不同方式。

flex-direction: row

这会从左到右水平显示 Flex 项。

.names-container {  
	display: flex;  
    flex-direction: row;  
    /* Other styles here... */
}

示例：flex-direction: row

flex-direction: column

这会从上到下垂直显示 Flex 项。

示例：flex-direction: column

flex-direction: row-reverse

这与 row 值相反。它从右到左显示 Flex 项。

示例：flex-direction: row-reverse

flex-direction: column-reverse

这与 column 值相反。它从下到上显示 Flex 项。

示例：flex-direction: column-reverse

在 StackBlitz 上 练习使用 flex-direction

关于反向值和无障碍的注意事项

当你使用 row-reverse 和 column-reverse 时，有些事情你需要记住。正如你已经看到的，这两个值会影响屏幕上元素的视觉顺序。

但是这些元素在 HTML 中的顺序保持不变，而这些元素在 HTML 中的顺序就是屏幕阅读器和键盘导航控件使用的顺序。

在示例中，当你使用 row-reverse 时，你首先在屏幕上看到 Jack 的名字，然后是 Jane、John 和 Jill。

但是对于使用屏幕阅读器的人来说，他们将会按照 HTML 中的出现顺序而不是屏幕上的顺序来听到这些名字。在这种情况下，他们将首先听到 Jill 的名字，然后是 John、Jane 和 Jack。

flex-wrap 属性

有时，Flex 容器内的空间不足以容纳 Flex 项。

在这种情况下，你可以使用 flex-wrap 属性来选择是让 Flex 项溢出还是另起一行。

flex-wrap 属性接受以下任何值：

• nowrap (默认值)
• wrap
• wrap-reverse

要看到 flex-wrap 的效果，让我们向 names-container 添加超过四个的名字：

<div class="names-container">  
	<p id="jill">1. JILL</p>  
	<p id="john">2. JOHN</p>  
	<p id="jane">3. JANE</p>  
	<p id="jack">4. JACK</p>  
	<p id="sara">5. SARA</p>  
	<p id="seth">6. SETH</p>  
	<p id="seal">7. SEAL</p>
</div>

flex-wrap: nowrap

这会使所有的 Flex 项都保持在单行中，无论是在行还是列中。如果在 Flex 容器中没有足够的空间，它允许 Flex 项溢出。请看下面的示例：

.names-container {  
	display: flex;  
	flex-direction: row;  
	flex-wrap: nowrap;  
	/* Other styles here... */
}

因为 flex-wrap 被设置为 nowrap，所以 Flex 项溢出

在这个例子中，由于空间不足，三个名字溢出容器。

flex-wrap: wrap

当空间不足时，这会将 Flex 项换行或推到下一行。

当 flex-wrap 设置为 wrap 时，Flex 项会换行或移动到下一行

flex-wrap: wrap-reverse

这与 wrap 相反。它将溢出的项目移动到下一行，但方向相反。

例如，在名字容器上使用 wrap-reverse 将溢出项移动到下一个顶行，而不是下面的下一行。

示例： flex-wrap: wrap-reverse

在 StackBlitz 上 练习使用 flex-wrap

flex-flow 缩写属性

flex-flow 属性是 flex-direction 和 flex-wrap 属性的缩写。这意味着当你使用 flex-flow 时，只需要一行代码即可同时应用这两个属性。

请参阅下面使用名字容器的示例。你可以为容器指定 flex-direction 和 flex-wrap 属性。

.names-container {  
	display: flex;  
	flex-direction: column;  
    flex-wrap: wrap;
}

或者你可以使用 flex-flow 缩写来获得相同的结果。

.names-container {  
	display: flex;  
	flex-flow: column wrap;
}

示例： flex-flow: column wrap

在 StackBlitz 上 练习使用 flex-flow

justify-content 属性

justify-content 属性处理 Flex 容器主轴上 Flex 项的对齐方式。

你可以使用它来处理主轴上空间的分配方式。该属性可以取以下任何值：

• flex-start (默认值)
• flex-end
• center
• space-between
• space-around
• space-evenly

justify-content: flex-start

这将把 Flex 项放置在 flex-direction 的起始位置。这将把 Flex 项放置在 flex-direction 的起始位置。如果主轴是水平的，并且 flex-direction 的属性值是 row（就像下面的示例），它会将 Flex 项对齐到左侧。如果主轴是垂直的（flex-direction 的属性值是 column），它会将 Flex 项对齐到顶部。

在names-container的例子中，justify-content: flex-start 的效果如下：

.names-container {  
	display: flex;  
	justify-content: flex-start;  
	/* Other styles here... */
}

示例：justify-content: flex-start

justify-content: flex-end

这会将 Flex 项放置在主轴的 flex-direction 的末尾。

示例：justify-content: flex-end

justify-content: center

这会将 Flex 项目放置在 Flex 容器主轴的中心。

示例：justify-content: center

justify-content: space-between

这会将第一个 Flex 项放置在主轴的起始位置，并将最后一个项放置在主轴的末尾。然后，主轴上的空间在这些元素之间均匀分布。（校对者注：space-between并不改变元素本身大小，它的作用只是将元素之间的间距均匀划分了）

示例：justify-content: space-between

justify-content: space-evenly

这会在 Flex 项之间均匀分配空间。这意味着每项前后的空间都相同。（校对者注：space-between模式中，首项和末项在没有其他CSS设置的前提下，与Flex容器的左外边距/右外边距为0，即在Flex容器中与最左端和最右端“顶格”。而space-evenly则是保证每一个Flex项左侧和右侧的边距均是相等的，即Flex项之间的间距和Flex项与Flex容器边界的间距都相等，该模式下Flex项与Flex容器的左右边界也存在间距。）

示例：justify-content: space-evenly

justify-content: space-around

这也会在 Flex 项之间均匀分配空间。这里的关键区别在于，第一个项之前和最后一个项之后的空间是 Flex 项之间空间的一半。

示例：justify-content: space-around

在 StackBlitz 上 练习使用 justify-content

align-items 属性

align-items 属性处理 Flex 项在 Flex 容器交叉轴上的对齐方式。它可以采用以下任意值：

• stretch (默认值)
• flex-start
• flex-end
• center
• baseline

align-items: stretch

这会拉伸 Flex 项以填充 Flex 容器内的空间。

看下面的示例，使用一个新的名字容器（names-container），其中包含不同大小的名字卡片：

.names-container {  
	display: flex;  
    align-items: stretch;  
    /* Other styles here... */
}

示例：align-items: stretch

align-items: flex-start

这会将 Flex 项放置在 Flex 容器的交叉轴的起始位置。如果交叉轴是垂直的，如下例所示， align-items: flex-start 会将项放置在顶部。

.names-container {  
	display: flex;  
	align-items: flex-start;  
	/* Other styles here... */
}

示例：align-items: flex-start

align-items: flex-end

这会将 Flex 项放置在 Flex 容器的交叉轴的末尾位置。如果交叉轴是垂直的，如下例所示， align-items: flex-end 会将项放置在底部。

.names-container {  
	display: flex;  
    align-items: flex-end;  
    /* Other styles here... */
}

示例：align-items: flex-end

align-items: center

这会将 Flex 项在 Flex 容器的交叉轴的中心对齐。

.names-container {  
	display: flex;  
	align-items: center;  
	/* Other styles here... */
}

示例：align-items: center

align-items: baseline

当你使用 baseline 值时，Flex 项目的排列方式是使它们的基线对齐。请参阅下面的示例：

.names-container {  
	display: flex;  
	align-items: baseline;  
	/* Other styles here... */
}

基线用白色虚线表示

在 StackBlitz 上 练习使用 align-items

align-content 属性

当你有一个带有换行（或多个 Flex 行）的 Flex 容器时，你可能需要对这些行进行对齐以根据需要分配空间。这时你可以使用 align-content 。该属性可以取以下任何值：

• stretch (默认值)
• flex-start
• flex-end
• center
• space-between
• space-evenly
• space-around

在下面的示例中，names-container中有 11 个名字，并且names-container的 flex-wrap 值为 wrap。这意味着你可以应用 align-content 属性来改变 Flex 行的对齐方式。

align-content: stretch

这会拉伸 Flex 行以填充 Flex 容器交叉轴内的空间。

.names-container {  
	display: flex;  
	flex-wrap: wrap;  
	align-items: stretch;  
	/* Other styles here... */
}

示例：align-content: stretch

align-content: flex-start

这将把 Flex 行放置在容器的交叉轴起始位置。例如，如果交叉轴像 names-container 一样是垂直的，它就会将 Flex 行放置在顶部。

示例：align-content: flex-start

align-content: flex-end

这会将 Flex 行放置在容器的交叉轴末尾位置。

示例：align-content: flex-end

align-content: center

这会将 Flex 行放置在容器的交叉轴中心位置。

示例：align-content: center

align-content: space-between

这会将第一行放置在交叉轴的起始位置。它还会将最后一行放置在交叉轴的末尾位置。然后，交叉轴上的空间会均匀分配给这些行。

示例：align-content: space-between

align-content: space-evenly

这会在 Flex 行之间均匀分配空间。这意味着每行前后的空间都是相同的。

示例：align-content: space-evenly

align-content: space-around

这也会在 Flex 行之间均匀分配空间。这里的主要区别在于，第一行之前和最后一行之后的空间是 Flex 行之间空间的一半。

示例：align-content: space-around

在 StackBlitz 上 练习使用 align-content

place-content 属性

如果你需要同时使用 justify-content 和 align-content 属性，你可以使用 place-content 缩写属性。

它可以接受一个或两个值。当你给它一个单一值时，浏览器会为 justify-content 和 align-content 应用相同的值。

当你为 place-content 提供两个值时，第一个值将用于 align-content ，第二个值将用于 justify-content。

让我们看一个示例:

无需这样写:

.names-container {  
	display: flex;  
	flex-wrap: wrap;  
	align-content: flex-end;  
	justify-content: flex-start;  
	/* Other content */
}

你可以改为写下面的代码，效果相同：

.names-container {  
	display: flex;  
	flex-wrap: wrap;  
	place-content: flex-end flex-start;  
	/* Other content */
}

示例：使用 place-content 缩写

在 StackBlitz 上 练习使用 place-content

Flex 项属性

Flex 容器的每个直接子元素都是 Flex 项。到目前为止，你已经学习了 Flex 容器的属性。

Flexbox 还有一些属性，你可以应用到单个 Flex 项上。它们包括以下内容：

• order
• align-self
• flex-grow
• flex-shrink
• flex-basis
• flex

order 属性

order 属性确定 Flex 项的出现顺序。

你给这个属性的赋值必须是一个数字。一个数字较小的 Flex 项将出现在数字较大的 Flex 项之前。

在 HTML 代码中，四个名字的顺序如下:

1. Jill
2. John
3. Jane
4. Jack

<div class="names-container">
	<p id="jill">1. JILL</p>
	<p id="john">2. JOHN</p>
	<p id="jane">3. JANE</p>
	<p id="jack">4. JACK</p>
</div>

你可以使用 order 属性改变屏幕上的出现顺序。请参阅下面的示例。

以下是没有 order 属性时它们的显示方式:

添加 order 属性之前的名字卡片

现在，当你添加以下 order 属性时，它们的显示方式如下所示：

.names-container {  
	display: flex;
}

#jill {  
	order: 2;  
    background-color: #fe4f46;
}

#john {  
	order: 4;  
    background-color: #fcd65c;
}

#jane {  
	order: 1;  
    background-color: 
    #00bab4;
}

#jack {  
	order: 3;  
    background-color: #003f54;
}

order 属性改变了出现顺序

在 StackBlitz 上 练习使用 order 属性

警告: 尽管屏幕上的出现顺序改变了，但 HTML 中的顺序保持不变。而屏幕阅读器使用的是 HTML 中的顺序。如果可能，最佳实践是在 HTML 中改变顺序，而不是使用 Flexbox 进行更改。

align-self 属性

你可以使用 align-self 属性为一个 Flex 项单独设置不同的对齐方式。

它的工作方式与 align-items 属性相同。不同之处在于， align-items 适用于所有 Flex 项，而 align-self 属性仅适用于特定项。

例如:

.names-container {  
	display: flex;  
    align-items: center;  
    /* Other styles */    
}

#jill {
	align-self: flex-start;
}

示例：align-self 带有 flex-start 值

在这个示例中，names-container 的 align-items 属性设置为 center，这会使所有名字都居中对齐。

但是使用 align-self 属性，你可以用 flex-start 将 Jill 的名字卡片对齐到顶部。

在 StackBlitz 上 练习使用 align-self 属性

flex-grow 属性

当你将容器的 display 设置为 flex 时，通常会在排列项之后有一些额外的空间。请参阅下面的示例：

.names-container {  
	display: flex;  
    justify-content: 
    flex-start;  
 	/* Other styles */
 }

Flex 容器有足够的空间容纳 Flex 项

浏览器会将多余的空间视为 1 的值。这意味着当你为其中一个 Flex 项的 flex-grow 设置为 0.5 时，浏览器会将剩余空间的一半添加到该项的大小中。

#jill {
	flex-grow: 0.5;
}

flex-grow 属性使 Jill 的大小大于其初始大小

如果你给 仅一个 Flex 项 设置了 flex-grow 值为 1 ，浏览器将把所有额外的空间都分配给该项。

注意： 如果容器中只有一个项具有 flex-grow 值，则任何值为 1 或更大的值都会使其占据所有额外空间。

例如，下面两个代码片段对 Jill 的卡片具有相同的效果：

#jill {  
	flex-grow: 1;
}

#jill {  
	flex-grow: 99;
}

当容器中只有一个卡片的 flex-grow 为 1 或以上时

当你为多个元素添加 flex-grow 值会发生什么？

浏览器将按比例为它们共享额外的空间。

例如，当你给 Jane 设置 flex-grow 为 3，给 Jack 设置 flex-grow 为 1 时，浏览器将以 3:1 的比例分享额外的空间。

这意味着额外空间的总值变为 4（3+1）。Jane 将获得额外空间的 3/4，而 Jack 将获得 1/4。

额外的空间按比例在 Jane 和 Jack 之间共享

在 StackBlitz 上 练习使用 flex-grow 属性

flex-shrink 属性

flex-shrink 属性与 flex-grow 相反。

当你希望在存在额外空间时增加 Flex 项的大小时，你可以使用 flex-grow。但是，当 Flex 容器中的空间不足时，你可以使用 flex-shrink 来减小 Flex 项的大小。

请参阅下面的示例:

<div class="numbers-container">
	<p id="one">1</p>
	<p id="two">2</p>
	<p id="three">3</p>
	<p id="four">4</p>
</div>

.numbers-container {  
	display: flex;  
	justify-content: flex-start;  
	/* Other styles */
}

#one {  
	flex-shrink: 2;  
	background-color: #fe4f46;
}

第一张卡片缩小，为其他卡片腾出空间

在这个示例中，四个数字每个的宽度都设置为 150px（总共 600px）。但 numbers-container 的宽度只有 400px，这是不够的。

卡片必须缩小以适应可用空间。但是 flex-shrink 的值为 2 的数字 1 ，元素大小缩小到了其他数字的 1/2。

如果你不希望一个 Flex 项缩小怎么办？

为了防止 Flex 项收缩，给它一个 flex-shrink 值为 0。

例如，当你为 Number 1 指定 flex-shrink 为 0 时，它将保持 150px 的宽度。其他 Flex 项将缩小以适应剩余空间。

第一个卡片不会缩小，因为它的 flex-shrink 值为 0。

在 StackBlitz 上 练习使用 flex-shrink 属性

flex-basis 属性

你可以使用 flex-basis 属性来设置特定 Flex 项的默认长度。这取决于 flex-direction ，可以是宽度或高度。

如果 flex-direction 是 row 或 row-reverse ，则 flex-basis 的值就成为 Flex 项的初始宽度。

如果 flex-direction 是 column 或 column-reverse ，那么 flex-basis 的值就成为 Flex 项的初始高度。

例如:

.names-container {  
	display: flex;  
	flex-direction: column;  
	/* Other styles */
}

div {  
	height: 20px;
}

#jane {  
	flex-basis: 60px;
}

示例：flex-basis 设置 item 的高度

在这个示例中，div 的高度设置为 20px。但 Jane 得到的 flex-basis 值为 60px。这会覆盖所有 div 的 20px。

注意：Jane 的 flex-basis 值为 60px，因为 flex direction 是 column。这意味着主轴是垂直的。

下面是另一个示例。这次，flex-direction 是 row。这意味着 flex-basis 将设置 Flex 项的宽度。

.names-container {  
	display: flex;  
	flex-direction: row;  
    /* Other styles */
}

div {  
	width: 70px;
}

#jane {  
	flex-basis: 140px;
}

示例：flex-basis 设置 item 的宽度

虽然所有其他 div 的宽度均为 70px，但 Jane 的宽度由 flex-basis 设置为 140px。

在 StackBlitz 上 练习使用 flex-basis 属性

flex 缩写属性

你可以使用 flex 作为 flex-grow、flex-shrink 和 flex-basis 属性的缩写。

例如，无需这样写：

.flex-item {  
	flex-grow: 2;  
	flex-shrink: 0;  
	flex-basis: 50px;
}

你可以像这样使用缩写，它会产生相同的效果：

.flex-item {  
	flex: 2 0 50px;
}

flex 属性最多可以接受三个值。值的顺序很重要。浏览器将第一个值分配给 flex-grow，第二个值分配给 flex-shrink，第三个值分配给 flex-basis。

flex 的默认值是 1 0 auto。

这意味着如果你给 flex 一个值为 2，浏览器将使用 2 作为 flex-grow。然后它将 flex-shrink 设置为 0，将flex-basis 设置为 auto。

在 StackBlitz 上 练习使用 flex 属性

如何使用 Flexbox 将元素居中

让许多前端开发人员头疼的问题之一是元素居中。 Flexbox 对此提供了一个完美的解决方案。

涉及两个步骤：

1. 通过将 display 设置为 flex 使父元素成为 Flex 容器。
2. 将 justify-content 和 align-items 都设置为 center。

就是这样！你的元素将完美居中！

例如:

<div class="name-container">  
	<p>JOHN</p>
</div>

.name-container {  
	display: flex;  
	justify-content: center;  
	align-items: center;  
	/* Other Styles */
}

示例：使用 Flexbox 居中一个元素

无论你是试着居中文本、图像，还是整个导航栏，这都能完美运行。

Flexbox 间隙

你可以使用 gap 属性来调整 flex 项之间的间距。

注意： 你将 gap 属性应用于 Flex 容器，而不是 Flex 项。

gap 可以取两个值：第一个值用于行之间的间距，第二个值用于列之间的间距。

例如:

.names-container {  
	display: flex;  
	flex-wrap: wrap;  
	gap: 50px 10px; 
	/* row-gap column-gap */
}

示例：为 gap 属性指定两个值

如果你想要的行和列之间的间距相同，你可以使用单个值。浏览器将为行和列都应用相同的值。

例如:

.names-container {  
	display: flex;  
	flex-wrap: wrap;  
	gap: 10px; 
	/* Other Styles */
}

示例：行距和列距仅使用一个值

如果你需要仅在行之间应用特定的间隙值，你还可以使用属性 row-gap 。如果你需要仅在列之间添加间隙，则使用 column-gap 。

例如：仅在行之间添加间距：

.names-container {  
	display: flex;  
	flex-wrap: wrap;  
	row-gap: 20px; 
	/* Other Styles */
}

示例：使用 row-gap

例如: 仅在列之间添加间距：

.names-container {  
	display: flex;  
	flex-wrap: wrap;  
	column-gap: 20px; 
	/* Other Styles */
}

示例：使用 column-gap

在 StackBlitz 上 练习使用 gap 属性

通过 Flexbox 游戏练习

想要以交互方式练习 Flexbox？看看以下游戏。它们以有趣且引人入胜的方式提供亲身体验 Flexbox 的实践练习。

• Flexbox Froggy
• Flexbox Defense
• Flexbox Zombies

CSS Flexbox 中有 Bug 吗

虽然 CSS Flexbox 是一个强大的布局工具，但它有一些可能会让你感到意外的 bug 。

一个常见的例子是 某些 HTML 元素无法充当 flex 容器。这些元素包括 <button>、<fieldset> 和 <summary> 元素。

解决方法是使用像 div 这样的元素来包裹该元素的子元素。然后在包装器 div 上使用 Flexbox。

如果你对其他 Flexbox 的 bug 和解决方法感兴趣，可以查看 GitHub 上的 Flexbugs 仓库。

总结

在本指南中，你学习了所有 Flexbox 属性、它们的值以及如何使用它们创建响应式布局。你还了解了一些像 Flexbox Froggy 这样的游戏，可以用来练习。

感谢你阅读本文，祝你编码愉快！欢迎订阅我的 YouTube 频道以获取更深入的教程。

译文校对者：Tsukistar

首先，让我们了解一些关于 CSS 定位的基础知识。

CSS position 属性

你可以使用 CSS position 属性根据需要在 CSS 中定位元素、div 和容器。 position 属性的好处在于，你可以使用它来将应用程序的元素排列在你想要的任何位置，并且它易于学习和实现。

CSS 中有五种类型的定位：

• 静态定位
• 相对定位
• 绝对定位
• 固定定位
• 粘性定位

让我们一一了解它们。

CSS 静态定位

静态定位是 CSS 中使用的默认定位属性。它始终按照页面的正常流进行。无论哪个元素首先出现在你的文档中，它都将首先显示。

代码如下：

/* Static Positioning */
.parent {
    padding: 5px;
    position: static;
    background-color: #00AAFF;
    width: 40%;
  }

  .child-one {
  	position: static;
    background-color: rgb(116, 255, 116);
  }
  
  .child-two {
  	position: static;
    background-color: rgb(248, 117, 117);
  }
  
  .child-three {
  	position: static;
    background-color: rgb(255, 116, 232);
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Position and Flexbox</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="parent">Parent
        <div class="child-one">One</div>
        <div class="child-two">Two</div>
        <div class="child-three">Three</div>
    </div>
</body>
</html>

在上面的例子中，我们有父级元素（parent），然后是子级元素（child-one、child-two、child-three）。它们都是按照静态定位排列的，也就是按照页面的正常流动。

CSS 相对定位

相对定位与静态定位完全一样，但有一个问题。

我们可以在相对定位中做四件事，而静态无法做到：我们可以将元素移动到左、右、下和上方向。

让我们通过一个例子来理解我的意思。

/* Relative Positioning */
.parent {
    padding: 5px;
    background-color: #00AAFF;
    width: 40%;
  }

  .child-one {
    position: relative;
    background-color: rgb(116, 255, 116);
  }
  
  .child-two {
    background-color: rgb(248, 117, 117);
  }
  
  .child-three {
    background-color: rgb(255, 116, 232);
  }

如果我们运行我们的应用程序，会看到输出没有区别。换句话说，静态和相对定位是相同的，除非我们使用相对的顶部、底部、左侧和右侧。

让我们尝试使用顶部、底部、左侧和右侧。

/* Relative Positioning with Top, Bottom, Left and Right */
.parent {
    padding: 5px;
    background-color: #00AAFF;
    width: 40%;
  }

  .child-one {
    position: relative;
    top: 10px;
    background-color: rgb(116, 255, 116);
  }
  
  .child-two {
    background-color: rgb(248, 117, 117);
  }
  
  .child-three {
    background-color: rgb(255, 116, 232);
  }

我们在 child-one 中使用 Top 和 Relative。

这会将 child-one 抛出文档流，它将从顶部移动到底部 10px。

你可以看到它覆盖了 child-two 元素。如果使用 left、right 或 bottom 也是类似情况。

child-one 覆盖 child-two 的主要原因是 child-one 不再是正常文档流的一部分，但 child-two 和 child-three 是。

CSS 绝对定位

定位元素的另一种方法是使用绝对定位。这种定位将元素从文档流中完全移除。所有其他元素将忽略具有绝对属性的元素。

而如果我们使用 Top、Bottom、Left、Right 和 Absolute，它会根据父容器排列元素，条件是父容器也必须是绝对定位的。

/* Absolute Positioning */
.parent {
    padding: 5px;
    background-color: #00AAFF;
    width: 40%;
    position: static;
  }

  .child-one {
    position: absolute;
    top: 0px;
    background-color: rgb(116, 255, 116);
  }
  
  .child-two {
    background-color: rgb(248, 117, 117);
  }
  
  .child-three {
    background-color: rgb(255, 116, 232);
  }

在这里，如果我们将 Top 设置为 0px，则 child-one 在文档的正常流之外。

那是因为 child-one 是绝对的，而 parent 是静态的。

但是如果我们将父级设置为绝对定位，在顶部 0px 位置呢？

/* Absolute Positioning */
.parent {
    padding: 5px;
    background-color: #00AAFF;
    width: 40%;
    position: absolute;
    top: 0px;
  }

  .child-one {
    position: absolute;
    top: 0px;
    background-color: rgb(116, 255, 116);
  }
  
  .child-two {
    background-color: rgb(248, 117, 117);
  }
  
  .child-three {
    background-color: rgb(255, 116, 232);
  }

在这里，你可以看到第一个子元素与父元素重叠，并且它们都位于顶部，为 0px。

还有第三个用例，我们可以将 Parent 设置为相对，将 child-one 设置为绝对。

/* Absolute Positioning */
.parent {
    padding: 5px;
    background-color: #00AAFF;
    width: 40%;
    position: relative;
    top: 0px;
  }

  .child-one {
    position: absolute;
    top: 0px;
    background-color: rgb(116, 255, 116);
  }
  
  .child-two {
    background-color: rgb(248, 117, 117);
  }
  
  .child-three {
    background-color: rgb(255, 116, 232);
  }

当我们使用相对和绝对时，这是最有用的用例。现在，你可以看到我们的 child-one 是相对于父元素的，而不是整个文档。

简单来说，如果将父级固定为相对，子级固定为绝对，则子级将把父级作为其容器。

CSS 固定定位

还记得绝对和相对定位吗？有一个定位完全忽略了父元素，那就是固定定位。

固定定位是根据整个 HTML 文档固定的。它不会跟随任何其他父级，即使它被设置为相对。

另一件事是，如果我们将某些东西设置为固定的，即使我们滚动页面，它也会保持在相同的位置。

固定定位主要用于浮动项目和按钮。

/* Fixed Positioning */
.parent {
    padding: 5px;
    background-color: #00AAFF;
    width: 40%;
    position: relative;
    top: 0px;
    height: 1000px;
  }

  .child-one {
    position: fixed;
    top: 0px;
    background-color: rgb(116, 255, 116);
  }
  
  .child-two {
    background-color: rgb(248, 117, 117);
  }
  
  .child-three {
    background-color: rgb(255, 116, 232);
  }

可以看到第一个元素完全脱离了它的父组件，即使父组件被设置为相对。

如果我们滚动页面，其余的子元素将根据文档流动，但固定的子元素将保持不变。

CSS 粘性定位

粘性位置是相对和固定的组合。

/* Sticky Positioning */
.parent {
    padding: 5px;
    background-color: #00AAFF;
    width: 40%;
    position: relative;
    top: 0px;
    height: 1000px;
  }

  .child-one {
    position: sticky;
    top: 0px;
    background-color: rgb(116, 255, 116);
  }
  
  .child-two {
    background-color: rgb(248, 117, 117);
  }
  
  .child-three {
    background-color: rgb(255, 116, 232);
  }

如果我们将子元素设置为粘性定位，它会看起来很正常，就像相对的。但是一旦我们开始滚动页面，粘性子元素就会粘在顶部。它将成为一个固定的定位。

粘性定位主要用于创建导航栏。

现在我们已经理解了 CSS 定位，让我们专注于 Flexbox。

如何使用 Flexbox

你可以使用 CSS Flexbox 属性在不使用浮动的情况下排列项目。这使得在文档中排列项目变得更加容易。你可以使用它来替换 CSS 中的网格（Grid）。

如果没有 Flexbox，我们的输出将与文档一起流动，即 child-1，然后 child-2，然后 child-3。

但是如果我们希望它们水平并排，如下图所示呢？

解决方案是使用 Flexbox。我们需要将它们相对于行或列均匀放置，它们之间或周围有空格。

首先，让我们创建一个包含三个子级的父 div。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Position and Flexbox</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="parent">
        <div class="child-one"></div>
        <div class="child-two"></div>
        <div class="child-three"></div>
    </div>
</body>
</html>

/* Flexbox container */
.parent {
    background-color: #00AAFF;
    width: 300px;
    height: 300px;
    display: flex;
  }

  .child-one {
    background-color: rgb(116, 255, 116);
    width: 300px;
    height: 300px;
  }
  
  .child-two {
    background-color: rgb(248, 117, 117);
    width: 300px;
    height: 300px;
  }
  
  .child-three {
    background-color: rgb(255, 116, 232);
    width: 300px;
    height: 300px;
  }

我们可以看到 parent 已经被声明为 flex。

在这里，我们有三个 div 框，每个都有不同的颜色。这是默认的 Flexbox 排列。

让我们看看 Flexbox 中不同类型的排列。

如何使用 Flexbox 排列元素

Flex 方向

此属性定义你的元素在屏幕上的显示方式，即垂直或水平方式。

Row 用于水平排列项目。

如你所见，我们在水平行中进行了排列。

Column 垂直排列项目，如下所示：

正方形现在排列在垂直列中。

Row Reverse 的工作方式与 row 完全相同，但元素的位置将颠倒。第一个元素将是最后一个，最后一个元素将移动到第一个。项目的排列将与 flex-direction: row 相反。

Column Reverse 的工作方式与 column 完全相同，但元素将被反转。第一个元素将是最后一个，最后一个元素将移动到第一个。

Justify Content

此属性确定元素的水平对齐方式。

Center 将元素设置为页面的水平中心。

Flex Start 将元素定位在页面的开头。

Flex End 将元素定位在页面的末尾。

Space Around 均匀地排列项目，但它们之间有空间。弹性盒容器内的所有元素之间的空间将相等，但不在它们之外。

在这里，child-one、child-two 和 child-three 之间的空间是相等的，但在外面不相等。

Space Between 最大化子元素之间的空间（它是一个 Justify Content 属性）。

Space Evenly 在子元素和 FlexBox 容器外的空间之间均匀分布相等的空间。

Align Items

Align items 用于在 flex 容器内垂直对齐项目。但这仅在有固定高度时才有效。

Center 将元素设置为垂直页面的中心。

Flex Start 与将内容对齐到中心相同，但它垂直排列元素。在我们的例子中，元素将位于屏幕的左上角。

Flex End 与 Flex Start 相同，但这会将项目对齐到屏幕的左下角。

现在你了解 Flexbox 的基础知识了。

如何在屏幕中心对齐项目

这些 Flexbox 属性也可以一起使用。例如，如果我们想将项目排列在最中心，我们可以同时使用 align-items: center 和 justify-content: center。

如果你想自己做实验，可以在 GitHub 查看代码。

感谢你阅读本文！

原文：How CSS Positioning and Flexbox Work – Explained with Examples，作者：Nishant Kumar

在本文中，我将描述 5 种最常见的网页布局，以及如何使用 Flexbox 和 Grid 构建它们。

如何运行

在 CodePen 上，每个布局下方都有一个完整 HTML 和 CSS 代码的链接。

请注意，我使用 SASS 来编写样式定义，因此如果你想在本地执行相同操作，请使用以下命令安装 SASS：

npm i sass -g

基本卡片模版

我使用上面的卡片作为网页布局的基础。它由垂直方向的三个元素组成，因此普通的 div 块就可以。但是，我稍后需要使中间的元素 - 文本段落 - 拉伸。

在这里 Flexbox 和 Grid 无缝地完成了这项工作。我更喜欢 Flexbox，因为它对我来说更直接。

获胜者：Flexbox

CodePen Flexbox，CodePen Grid

现在让我们开始创建不同的布局。

#1 垂直且水平居中一张卡片

对于 Flexbox，我们需要一个水平居中的元素，以及垂直居中的另一个（子元素）。

项目的顺序由 flex-direction 定义的。元素如何在可用空间中定位自己是由元素上的 align-self 或其父元素上的 align-items 设置的。

对于 Grid，我们需要三列三行。然后我们将卡片放在中间的单元格中。

水平居中很容易。我们使用 grid-template-columns: auto 33% auto 定义三列及其大小，因为卡片应该和可见区域的 1/3 一样宽。

问题是，我们不知道垂直尺寸。我们希望顶行和底行占据网格无法实现的剩余空间。 卡片居中，但其高度取决于窗口的高度。

但是，我们可以通过在卡片周围添加额外的环绕元素，并使用 margin 将其居中，来解决此问题。

获胜者：Flexbox

CodePen Flexbox，CodePen Grid

#2 垂直且水平居中两张卡片

通常我们需要将多个元素居中。将两张卡片保持相同的高度，即使其中一张卡片包含更长的文本。

使用 Flexbox，我们需要将两张卡片包裹在另一个元素中，并使用它同时将两张卡片居中。

我们不能在这里使用 align-items，因为在这种情况下它适用于 Y 轴。我们需要用 justify-content: center 来定义 X 轴上的剩余空间应该如何分布。这样可以确保两张卡都水平居中。

如果我们省略 Grid 的可变高度问题，即使没有任何额外的包裹元素，我们也可以获得相同的结果。这次我们用 grid-template-columns: auto 33% 50px 33% auto 定义了五列网格，其余部分与前一个示例中的相同。

获胜者：Flexbox

CodePen Flexbox，CodePen Grid

#3 多张卡片具有相同的宽度和高度

这是博客、电子商务网站或通常显示某种列表的任何网站的另一个典型用例。我们希望卡片具有相同的宽度和高度。需要从列表中最大的元素推断高度。

这可以在 Flexbox 中使用 flex-wrap: wrap 来完成。如果元素的宽度超过每行的剩余空间，则元素将换行到下一行。但是，除非你明确定义，否则只在单行内保持相同的高度。

Grid 在这里展示了它的真正力量。可以使用 grid-auto-rows: 1fr 创建此布局，它在所有行上强制执行相同的高度。

获胜者：Grid

CodePen Flexbox，CodePen Grid

#4 垂直和水平居中交替文本和图像

在这个例子中，我们有带有 CTA 按钮的文本，另一侧有一个图像。两个组件都应垂直居中，因为它们的大小可能会有所不同。

这对 Flexbox 来说是小菜一碟。每一行都是一个 article 元素，分为两个包装容器，.img 和 .content。它们是均匀尺寸分布所必需的（flex-basis: 50%）。

内部内容的垂直居中由 align-items: center 定义。

交替是通过在每个奇数文章上使用 flex-direction: row-reverse 反转 Flexbox 的方向来实现的。

Grid 也很好地处理了这个用例。我们不需要定义一个巨大的网格，而是为每个 article 定义一个。

它使用 align-items: center 定义垂直居中的同样宽的列。

交替是通过 grid-column 的切换值在单元格级别定义的。

获胜者：平手

CodePen Flexbox，CodePen Grid

#5 带菜单的水平标题

要使用 Flexbox 实现这种设计，标题的两侧都需要由单个元素表示。

logo 和公司名称在左侧形成一个锚点 anchor，菜单是右侧的单个 nav 元素。Flexbox 使用 justify-content: space-between 来定位它们。

对于 Grid，我们需要两列——一列用于 logo，另一列用于菜单。该菜单是另一个使用 grid-template-columns: repeat(4, minmax(0, 1fr)) 均匀分布列大小的网格。

这里的问题是，如果我们想在菜单中添加另一个项目，我们还需要调整 CSS。

获胜者：Flexbox

CodePen Flexbox，CodePen Grid

获胜者是......

最终的比分是 5:2，Flexbox 领先，但这并不意味着它成为最终的 CSS 赢家。在某些情况下，你需要使用其中一种，有时甚至两者一起使用，以实现你的需求。

如果你需要灵活和有条件的定位，请使用 Flexbox。如果要创建需要相同大小的元素或具有表格形式的列表或类似结构，请使用 Grid。

作为前端开发人员，你需要了解这两者。

Flexbox 参考指南，Grid 参考指南

P.S. 如果以上内容由遗漏，请在 Twitter 告诉我，我会再写一篇 :-)

原文：Flexbox vs Grid - How to Build the Most Common HTML Layouts，作者：Ondrej Polesny

理解 Flexbox 最好的方式是什么？学好基础，再大量练习。这正是我们要在这篇文章中做的事情。

要注意的几点

• 这篇文章预设你是一名中级开发者，并且对 Flexbox 有点了解，不过......
• 如果你对 CSS 有些了解，完全不知道 Flexbox，我写了一篇综合指南（免费文章，阅读时间约为 46 分钟）。
• 如果你对 CSS 掌握得不是很好，我推荐你阅读 CSS 全面（实用）指南 (74 课时的付费课程)。
• 你不需要遵照这里列出的示例顺序。
• Flexbox 只是一种布局的技巧，实际项目中涉及到的东西除了布局还有很多。
• 当你看到例如 div.ohans 的例子，这代表类名是 ohans的 div

例1: 如何用 Flexbox 制作一个影片集

使用 Flexbox 实现横向纵向排列比大多数人想象的要简单。

例如一个如下的简单标识文本：

<main class="gallery">  <img src="/sample.jpg">  <img src="/sample.jpg">  <img src="/sample.jpg">  <img src="/sample.jpg">  <img src="/sample.jpg">  <img src="/sample.jpg">  <img src="/sample.jpg">  <img src="/sample.jpg">  <img src="/sample.jpg">  <img src="/sample.jpg"></main>

main.gallery 里有十张图片。

假定 main.gallery 覆盖整个可见屏幕。

.gallery {   min-height: 100vh}

有关图片的快速标记

图片默认是一个 inline-block 元素，有宽高，通常排列在同一行（除了图片尺寸有限定，一行排不下的情况）。

起始点

把所有图片放在一起，上面的标识文本显示效果如下：

现在，看下 Flexbox 的效果:

.gallery {    display: flex }

现在，图片的默认属性已经发生改变。它们从 inline-block 元素变成了 flex-items.

由于 .gallery 里的 Flexbox 布局，里面的图片会被压缩排列在一行内，而且它们会被纵向拉伸成这样：

这就是由于 Flexbox 布局的默认展示方式:

1. 将所有的子元素压在一行内，不换行。

这并不适用于图片库，因此我们可以这样改变：

.gallery {    flex-wrap: wrap}

这样所有的元素会在适当的位置换行成多行排列。

2. 现在图片有换行，但是仍然被纵向拉伸。我们当然不想要这样变形的布局。

stretch 显示是因为 flex 里默认的 align-items 值。

align-items: stretch

我们可以改成这样：

.gallery {  ...  align-items: flex-start}

这样图片不会拉伸，而是保持它们默认的宽和高。

如下所示，它们会在纵向保持首部对齐。

现在我们就有了使用 Flexbox 的强大图片集。

使用 Flexbox 的优点

此刻 Flexbox 似乎没展现出什么优势，图片还是像使用 Flexbox 之前一样。

除了能得到一个免费的响应式图片集外，使用 Flexbox 的另一个优势就是它的对齐选项。

还记得 flex 容器 .gallery 设定的样式 flex-direction: row justify-content: flex-start 和 align-items: flex-start.

如下所示，改变默认值，我们就可以立马改变图片库的布局。

.gallery {   ...   justify-content:center;}

如上所示，这会让图片水平居中。

.gallery {   ...   justify-content:center;   align-items: center;}

再进一步，我们可以让图片完美居中对齐（无论是水平还是垂直）

如上所示，这可以让图片在 .gallery 内水平和垂直都居中。

你可以通过 Flexbox 的布局方式随意选择你想要的对齐选项。

也可以在 CodePen查看 Flexbox 图片库的实时布局效果。

例 2：如何通过 Flexbox 布局卡片

卡片在网上很流行，无论是Google, Twitter 还是 Pinterest，每个网站都在使用卡片。

卡片是一种在弹性容器内组合相关信息的页面设计方式，视觉上很像一种玩的卡片。

有很多使用卡片的优秀案例，其中一个常用的就是臭名昭著的价格表。

让我们来建一个。

标识文本

我们给每个卡片设定一个如下的标识：

<section class="card">  <header>  </header>

  <ul>    <li></li>    <li></li>    <li></li>  </ul>  <button></button></section>

这里有至少 3 个卡片，我们把这些卡片包在 div.cards里

<div class="cards"></div>

现在已经有了一个父元素。在这个例子中，父元素充满整个视图。

.cards {   min-height: 100vh}

建立 Flexbox 布局

下面的代码块新建了一个在 .cards 里面的 Flexbox 布局样式。

.cards {  display: flex;  flex-wrap: wrap}

如果你还记得上一个例子， flex-wrap 可以让 flex-items 元素换行。

由于子元素排列需要更大的宽度，所以子元素不能在父元素内排列时就会换行。

接下来我们给 .card 元素一个初始宽度。

使用 Flexbox 如下布局:

.card {  flex: 0 0 250px}

这个样式将 flex-grow 和 flex-shrink 的值设为 0， flex-basis 值为 250px。

这时，卡片会在页面的起始处对齐，并且竖向排列。

这有时可能满足你的使用需求，但大部分情况下，都不行。

Flex 容器的默认值

上面的布局效果是由于 flex 容器的默认布局设置。

卡片在页面内靠左上角对齐，因为 justify-content 的值默认为 flex-start 。

同时，卡片垂直拉伸充满整个父元素的高度，因为 align-items 的默认值是 stretch 。

改变默认值

我们可以通过改变 Flexbox 提供的默认值来达到更好的效果。

看下面几个例子：

align-items: flex-start; justify-content: center

align-items: flex-end; justify-content: center

align-items: center; justify-content: center

你可以在CodePen看最终的效果。

例 3：如何使用 Flexbox 创建网格布局

在这个例子中，我们要探讨整体的 CSS 框架概念，这是很重要的一点。

什么是网格布局？

网格是用来构建内容的一系列水平垂直相交引导线。

如果你对 Bootstrap 这样的 CSS 框架比较熟悉，那你之前一定使用过网格布局。

你所掌握的内容可能不一样，但这个例子会涵盖不同的网格布局类型。

我们先来看第一种，基本网格布局

基本网格布局

这些网格有以下特点：

• 网格单元格平均布局并充满整行。
• 单元格高度一致。

使用 Flexbox 很容易实现这个效果，看下面这个标识文本：

<div class="row">  <div class="row_cell">1</div></div>

每个 .row 都是自己的 flex 容器。

.row 里的每个元素也就是 flex 元素，所有的 flex 元素都平均分布在一行中。

根据设计，无论有 3 个子元素

<div class="row">  <div class="row_cell">1/3</div>  <div class="row_cell">1/3</div>  <div class="row_cell">1/3</div></div>

6 个子元素

<div class="row">  <div class="row_cell">1/6</div>  <div class="row_cell">1/6</div>  <div class="row_cell">1/6</div>  <div class="row_cell">1/6</div>  <div class="row_cell">1/6</div>  <div class="row_cell">1/6</div></div>

或是 12 个子元素，都是没影响的

<div class="row">  <div class="row_cell">1/12</div>  <div class="row_cell">1/12</div>  <div class="row_cell">1/12</div>  <div class="row_cell">1/12</div>  <div class="row_cell">1/12</div>  <div class="row_cell">1/12</div>  <div class="row_cell">1/12</div>  <div class="row_cell">1/12</div>  <div class="row_cell">1/12</div>  <div class="row_cell">1/12</div>  <div class="row_cell">1/12</div>  <div class="row_cell">1/12</div></div>

解决方案

达到这个效果只需要两步：

1. 新建一个 Flexbox 布局文本：

.row {   display: flex;}

2. 扩大每个 flex-item 元素，让它们以相同比例均匀的布满整行：

.row_cell {   flex: 1}

就是这样

方案解释

flex: 1

flex 是 flex-grow 、 flex-shrink 和 flex-basis 三个不同 Flexbox 属性的缩写。

flex: 1 只有 1 的值，这个值代表的是flex-grow 属性。

而 flex-shrink 和 flex-basis 则分别设置为 1 和 0。

flex: 1  === flex: 1 1 0

有确定大小的网格元素

有时候你需要的效果并不是同样大小的水平网格布局。

你可能想要一个元素是其他的两倍，或者几分之一。

实现方式很简单。

对于这些有确定大小的网格元素，只需要加一个这样的修饰符类：

.row_cell--2 {   flex: 2}

加上这个类，可以看到第一个 div 子元素代码如下：

<div class="row">  <div class="row_cell row_cell--2">2x</div>  <div class="row_cell">1/3</div>  <div class="row_cell">1/3</div></div>

加上 .row__cell--2 类名的元素会是其他默认元素的两倍大小。

一个占可用空间 3 倍的元素：

.row_cell--3 {
flex: 3
}

有确定对齐方式的网格元素

多亏了 Flexbox 布局，我们不需要给每个元素设置特定的对齐值。你可以给任何一个元素设定不同的对齐方式。

通过下面的修饰符类，可以达到这样的效果：

.row_cell--top {  align-self: flex-start}

这可以让特定的元素在 row 内靠顶部对齐。

你一定有在标识文本中给特定元素加上这个类。看文本中第一个 div 子元素：

<div class="row">  <div class="row_cell row_cell--top"></div>  <div class="row_cell"></div>  <div class="row_cell"></div></div>

下面是其他可选的对齐方式：

.row_cell--bottom {  align-self: flex-end}

.row_cell--center {  align-self: center}

行内对齐

像特定的元素可以对齐一样，行内子元素也可以整体对齐。

可以使用下面的修饰符类达到这样的效果：

.row--top {   align-items: flex-start}

需要注意的一个重点是，修饰符类 .row--top 一定要被加在 row 或是父元素 flex-container 上。

<div class="row row--top">  <div class="row_cell"></div>  <div class="row_cell"></div>  <div class="row_cell"></div></div>

其他的对齐选项见下：

.row--center {   align-items: center}

.row--bottom {   align-items: flex-end}

嵌套网格

只需要简单的设置，rows（行元素）就可以嵌套布局。

你可以在 created here查看最终的布局效果。

更多网格布局

当你可以用 Flexbox 垂直网格甚至更复杂的参数实现好看的网格构造时，就可以把这个很好的工具用于工作。学习，掌握然后使用 CSS 网格布局，这是 CSS 网格布局的最终解决方案。

例 4：如何使用 Flexbox 构建网站布局

社区通常不建议整个网站布局都使用 Flexbox。

虽然我赞同这个观点，但是我也认为在特定的情况下你可以不用考虑这么多。

我能给到最重要的一点建议是：

在你需要的时候使用 Flexbox 布局

我会在下面的例子中解释这点。

圣杯布局

有什么网站布局方式比“圣杯布局”更经典呢？

有两种 Flexbox 方式可以实现这种布局。

第一种是用 Flexbox 来实现布局。把 header, footer, nav, article 和 aside 都放在一个 flex-container 容器里。

我们开始吧。

标识语言

看下下面这个基本的标识语言：

<body>  <header>Header</header>  <main>    <article>Article</article>    <nav>Nav</nav>    <aside>Aside</aside>  </main>  <footer>Footer</footer></body>

其中，圣杯布局遵循了一个特殊的规则，这个规则启发了上面的标识语言：

中间的那列 article 应该在 nav 和 aside 两个侧边栏之前显示出来。

建立一个 Flexbox 格式文本

body {   display: flex}

因为子元素应该从顶部到底部布局，所以我们要改变 Flexbox 的默认方向。

body { ... flex-direction: column}

1. header 和 footer 要有固定的宽度

header,footer {  width: 20vh /*可以使用像素单位，例如200px*/}

2.main 要填满 flex-container 中剩下的部分。

main {   flex: 1}

你一定没忘记， flex: 1 代表 flex-grow: 1 , flex-shrink: 1和 flex-basis: 0。

此刻，我们要开始考虑 main 中的 article, nav和 aside 三个部分。

把 main 设成一个 flex-container ：

main {  display: flex}

给 nav 和 aside 以固定的宽度：

nav,aside {  width: 20vw}

然后确保 article 填满剩下的可用空间：

article {   flex: 1}

现在还需要做一件事。

把 flex-items 重新排序这样 nav 会展示在第一位：

nav {  order: -1}

最终效果 https://codepen.io/ohansemmanuel/full/brzJZz/

order 属性用来重新排序 flex-items 的位置。

容器中所有 flex-items 都会以 增大的 order 值排列， flex-item 中 order 值最小的会排列在最前面。
所有的 flex-items 元素默认 order 值都是 0。

圣杯布局 (另一种布局方式)

之前的方式是把 flex-container 作为一个整体的容器。这个布局非常依赖 Flexbox。

我们来了解一种更为“理智”的方法。首先再来看下最终要达到的效果：

header 和 footer 可以被当做块状元素。 在没有任何干预的情况下，它们会在从顶部到底部，填满父级元素。

<body>  <header>Header</header>  <main>    <article>Article</article>    <nav>Nav</nav>    <aside>Aside</aside>  </main>  <footer>Footer</footer></body>

使用这种方法，唯一需要作为 flex-container 的就是 main 元素。

使用这个方法有个缺点就是你要自己计算 main 的高度。 main 应该填满除 header 和 footer.外的空间。

main {  height: calc(100vh - 40vh);}

上面的代码块使用 CSS 中的 calc 来计算 main.的高度。

不管怎样， main 的高度都要等于 calc(100vh — 头部的高度 — 页脚的高度 ).

在之前的解决方案中， header 和 footer 都有一个固定的高度，接下来再通过同样的方法计算 main 的高度。

你可以在 actual results here 中查看最终效果。

两列网页布局

两列布局很常见，这也可以用 Flexbox 轻松实现。

看下以下标识文本：

<body>  <aside>sidebar</aside>  <main>main</main></body>

body {  display: flex;}

aside {   width: 20vw}

main {  flex: 1}

<div class="media">  <img class="media-object" src="/pic.jpg">  <div class="media-body">    <h3 class="media-heading"> Header </h3>    <p></p>  </div></div>

.media {   display: flex}

.media-body {   flex: 1}

.media {  ...  align-items: flex-start}

.media-object {   order: 1}

<div class="media">  <img class="media-object" src="/pic.jpg">  <div class="media-body">    <h3 class="media-heading"> Header </h3>    <p></p>        <!--nested-->    <div class="media">    <img class="media-object" src="/pic.jpg">    <div class="media-body">        <h3 class="media-heading"> Header </h3>        <p></p>    </div>    </div><!--end nested-->  </div> </div>

<div class="media">  <div class="media-object">?</div>  <div class="media-body">    <h3 class="media-heading"> Header </h3>    <p></p>  </div></div>

<div class="media">  <div class="media-object">☎</div>  <div class="media-body">    <h3 class="media-heading"> Header </h3>    <p></p>  </div></div>

<form class="form">  <input class="form__field">  <button class="form__item">…</button></form><form class="form">  <span class="form__item">…</span>  <input class="form__field"></form><form class="form">  <span class="form__item">…</span>  <input class="form__field">  <button class="form__item">…</button></form>

.form {  display: flex}

.form__field {   flex: 1}

.form__item {  ... }

这篇全面的 CSS flexbox 速查表将会涵盖你在 Web 项目中使用 flexbox（弹性盒子）所需要的一切知识。

你可以使用 CSS flexbox 格式化 HTML。利用 flexbox 可以轻松地垂直或水平对齐项目，调整项目尺寸以适应空间。这样可以简化响应式设计。

CSS flexbox 对于网站或应用程序的总体布局是非常理想的。这种方法简单易学，适用于所有的现代浏览器，并且你不需要很多时间就能掌握它的基础知识。看完这篇指南，你就可以开始在你的 Web 项目中使用 flexbox 了。

这篇文章包含了 ScottDomes 制作的 gif 动画，更容易理解。

不同的 CSS Flexbox 属性

下面罗列出各种 CSS flexbox 属性，可以用来在 CSS 中定位元素。

CSS 应用于容器

display: flexbox | inline-flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

CSS 应用于容器中的元素

order: <integer>;
flex-grow: <number>; /* default 0 */
flex-shrink: <number>; /* default 1 */
flex-basis: <length> | auto; /* default auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;

术语

学 flexbox 属性之前，一定要知道相关的术语。下方是主要的 flexbox 术语的定义，来自 W3C 官方规范。

• main-axis：flex 项目沿着主轴 main axis 排布，方向是基于 flex-direction 属性的
• main-start | main-end：flex 项目在容器中，从 main-start 一侧开始，向 main-end 一侧排列
• main size：flex 容器或项目的宽或高作为主尺度，main size 属性就是指这个作为主尺度的尺寸
• cross axis：与主轴 main axis 交叉的轴
• cross-start | cross-end：项目放置在容器的 flex 网格线之间，从 cross-start 一侧开始，向 cross-end 一侧排列
• cross size：flex 项目的宽或高作为主尺度，cross size 属性就是指这个作为主尺度的尺寸

CSS Display Flex

display:flex 告诉浏览器：“我想在容器中使用 flexbox。”

A div element defaults to display:block. An element with this display setting takes up the full width of the line it is on. Here is an example of four colored divs in a parent div with the default display setting:

默认情况下，div元素是 display:block。带有该显示设置的元素将完全占用它所在行的宽度。下面这个例子是一个默认设置的父级 div 包含 4 个彩色的 div。

为了在页面的某一部分使用 flexbox，首先需要给父容器的 CSS 添加 display:flex，把父容器转换成 flex 容器。

这个容器被初始化为一个 flex 容器，并且应用一些默认的 flex 属性。

flex 方向

使用 flex-direction 可以控制如何显示容器中的项目。你想让它们从左到右、从右到左、从上到下还是从下到上？通过为容器设置 flex-direction，可以很容易地实现 。

在使用 display:flex 之后，项目默认沿着主轴从左到右排列。以下动画展示向容器项目添加 flex-direction:column 时发生的事情。

你也可以设置 flex-direction 为 row-reverse 或 column-reverse。

Justify Content

justify-content 是一个属性，它使容器中的项目沿着主轴对齐（见上面的术语图表），根据内容如何显示而定。使用这个属性填充行之间的空间，并定义如何安排内容。

这个属性常用的四个选项：flex-start | flex-end | center | space-between | space-around，效果如下：

space-between 让项目保留一定间距地在主轴排列，第一个和最后一个项目会被挤到容器边沿。space-around 是类似的，但头尾两个项目不会紧贴容器边沿，空间会均匀分布在所有项目两边。

Flex Align Items

align-items 将项目沿着横轴（见上面的术语图表），同时使用 justify-content 和 align-items 就可以用多种不同的方法对齐项目。

这里有一些最常用的选项来对齐项目：flex-start | flex-end | center | baseline | stretch。

要想使用 stretch 达到预期效果，元素的高度必须设置为 auto 而非特定高度。

该动画显示选项的样式：

我们现在同时使用 justify-content 和 align-items，会显示主轴和交叉轴的区别。

Align Self

Align-self 用于调整单个元素的位置，具有 align-items 的所有属性。
在下方动画中，父级 div 有 CSS 的 align-items: center和flex-direction: row。前面两个方块根据不同的align-self 值产生变化。

Flex Wrap

flexbox 在默认情况下尝试将所有元素放在一行中。然而，可以使用 flex-wrap 属性来改变这个设置。你可以使用三个值来决定什么时候将元素移动到其他行。

flex-wrap: nowrap为默认值，所有内容会从左到右排列。

如果第一行没有足够的空间，flex-wrap: wrap 可以将项目移到下一行，从左到右显示项目。

flex-wrap: wrap-reverse 也是将项目移到下一行，但项目是从右到左显示的。

Flex Flow

flex-flow 将 flex-wrap 和 flex-direction 组合成一个属性，先设定方向，再设定环绕效果，比如：flex-flow: column wrap;

Align Content

align-content 是用于对齐多行项的，在横轴上对齐，而不影响某一行的内容。

包含这些选项：align-content: flex-start | flex-end | center | space-between | space-around | stretch;

用 Flexbox 垂直居中

若要将所有内容在父元素中垂直居中，可使用 align-items。

.parent {
    display: flex;
    align-items: center;
}

游戏和应用

如果你想练习使用 flexbox，试试这些游戏和应用，它们可以帮助你掌握 flexbox

• Flexbox Defense 是一个在线游戏，你可以通过防止敌人穿过你的障碍来学习 flexbox
• Flexbox Froggy 这个游戏里你通过写 CSS 编码来帮助 Froggy 和朋友们
• Flexyboxes 这个应用允许你查看代码示例和改变参数来查看 flexbox 视觉效果
• Flexbox Patters 是一个提供很多 flexbox 示例的网站

总结

本文介绍了 CSS flexbox 最常用的所有属性。接下来就是练习！试着用 flexbox 创建一些项目吧，这样你就能慢慢掌握它。

原文：Flexbox - The Ultimate CSS Flex Cheatsheet (with animated diagrams!)，作者：Beau Carnes