CSS Flexbox 手册——附带实用示例的完整指南

原文： The CSS Flexbox Handbook – Complete Guide with Practical Examples

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 , 不用担心。你即将学会它。

The main axis and the cross axis when the

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

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

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

45.-cross---main-axis

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;
}

46.-display-flex

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

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

`display: inline-flex`

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

47.-display-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... */
}

1.-flex-direction-row

示例：flex-direction: row

`flex-direction: column`

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

2.-flex-direction-column

示例：flex-direction: column

`flex-direction: row-reverse`

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

3.-flex-direction-row-reverse

示例：flex-direction: row-reverse

`flex-direction: column-reverse`

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

4.-flex-direction-column-reverse

示例：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... */
}

5.-flex-wrap-nowrap

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

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

`flex-wrap: wrap`

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

6.-flex-wrap-wrap

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

`flex-wrap: wrap-reverse`

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

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

7.-flex-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;
}

8.-flex-flow

示例： 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... */
}

9.-justify-content-flex-start

示例：justify-content: flex-start

`justify-content: flex-end`

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

10.-justify-content-flex-end

示例：justify-content: flex-end

`justify-content: center`

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

11.-justify-content-center-

示例：justify-content: center

`justify-content: space-between`

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

12.-justify-content-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容器的左右边界也存在间距。）

13.-justify-content-space-evenly

示例：justify-content: space-evenly

`justify-content: space-around`

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

14.-justify-content-space-around

示例：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... */
}

15.-align-items-stretch

示例：align-items: stretch

`align-items: flex-start`

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

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

16.-align-items-flex-start

示例：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... */
}

17.-align-items-flex-end

示例：align-items: flex-end

`align-items: center`

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

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

18.-align-items-center

示例：align-items: center

`align-items: baseline`

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

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

Untitled-design-1

基线用白色虚线表示

在 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... */
}

20.-align-content-stretch

示例：align-content: stretch

`align-content: flex-start`

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

21.-align-content-flex-start

示例：align-content: flex-start

`align-content: flex-end`

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

22.-align-content-flex-end

示例：align-content: flex-end

`align-content: center`

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

23.-align-content-center

示例：align-content: center

`align-content: space-between`

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

24.-align-content-space-between

示例：align-content: space-between

`align-content: space-evenly`

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

25.-align-content-space-evenly

示例：align-content: space-evenly

`align-content: space-around`

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

26.-align-content-space-around

示例：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 */
}

43.-place-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 代码中，四个名字的顺序如下:

Jill
John
Jane
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 属性时它们的显示方式:

27.-no-order-property

添加 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;
}

28.-with-order-property

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;
}

37.-align-self

示例：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 */
 }

29.-flex-grow-extra-space

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

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

#jill {
	flex-grow: 0.5;
}

30.-flex-grow-0.5

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

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

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

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

#jill {  
	flex-grow: 1;
}

#jill {  
	flex-grow: 99;
}

31.-flex-grow-1-or-more

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

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

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

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

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

32.-flex-grow-jane-jack

额外的空间按比例在 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;
}

33.-flex-shrink-value-2

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

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

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

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

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

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

34.-flex-shrink-vallue-0

第一个卡片不会缩小，因为它的 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;
}

35.-flex-basis-height

示例：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;
}

36.-flex-basis-width

示例：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 对此提供了一个完美的解决方案。

涉及两个步骤：

通过将 display 设置为 flex 使父元素成为 Flex 容器。
将 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 */
}

38.-center-element-w--flexbox

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

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

Flexbox 间隙

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

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

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

例如:

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

39.-gap-two-values

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

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

例如:

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

40.-gap-single-value

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

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

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

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

41.-row-gap

示例：使用 row-gap

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

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

42.-column-gap

示例：使用 column-gap

在 StackBlitz 上 练习使用 gap 属性

通过 Flexbox 游戏练习

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

CSS Flexbox 中有 Bug 吗

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

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

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

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

总结

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

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

译文校对者：Tsukistar

目录

什么是 Flexbox

使用 Flexbox 有什么好处

主轴和交叉轴

Flex 容器和 Flex 项

了解 Flex 和 Inline-flex

display: flex

display: inline-flex

Flex 容器属性

flex-direction 属性

flex-direction: row

flex-direction: column

flex-direction: row-reverse

flex-direction: column-reverse

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

flex-wrap 属性

flex-wrap: nowrap

flex-wrap: wrap

flex-wrap: wrap-reverse

flex-flow 缩写属性

justify-content 属性

justify-content: flex-start

justify-content: flex-end

justify-content: center

justify-content: space-between

justify-content: space-evenly

justify-content: space-around

align-items 属性

align-items: stretch

align-items: flex-start

align-items: flex-end

align-items: center

align-items: baseline

align-content 属性

align-content: stretch

align-content: flex-start

align-content: flex-end

align-content: center

align-content: space-between

align-content: space-evenly

align-content: space-around

place-content 属性