CSS 的 Flexbox 布局已经成为前端界的标准之一，可以方便地实现很多现代网页设计中的常见布局。本文将详细介绍 Flexbox 布局的基本概念、使用方法和实践经验，以及一些常见问题的解决方案。
概述
Flexbox 是 Flexible Box 的缩写，也就是一种灵活的盒状布局模型。它通过将容器中的子元素（Flex 子项）重新排列，将空间分配给容器内的子元素，从而创建灵活的、自适应的布局。
Flexbox 的特点有以下几点：
- 可以实现水平和垂直方向的布局；
- 子项的大小可以自适应容器的大小；
- 可以指定子项的排序、对齐和间距等属性；
- 可以方便地实现响应式布局，适应不同的设备和屏幕尺寸。
基本概念
在使用 Flexbox 布局之前，需要了解一些基本概念和术语。
Flex 容器和 Flex 子项
Flex 容器是指应用了 Flexbox 布局的元素，通过设置 display: flex 或 display: inline-flex 来创建一个 Flex 容器。
Flex 子项是指 Flex 容器内的子元素，它们的布局和排列受 Flexbox 的控制，可以使用不同的属性来调整它们的外观和行为。
主轴和交叉轴
Flex 容器是一个带有主轴和交叉轴的二维网格。主轴和交叉轴的方向由 Flexbox 的 flex-direction 属性来指定。
主轴是 Flex 子项的排列方向，它可以是水平方向（从左到右）或垂直方向（从上到下）。
交叉轴是 Flex 子项垂直于主轴的方向，它可以是水平方向或垂直方向。
Flex 项目的属性
Flex 子项的布局和排列可以通过设置以下属性来调整：
flex-grow: 定义项目的放大比例，默认为 0，即不放大。flex-shrink: 定义项目的缩小比例，默认为 1，即可缩小。flex-basis: 定义项目的基准大小，默认为 auto，即使用项目本身的大小。flex: 等同于flex-grow、flex-shrink、flex-basis三个属性的缩写。align-self: 定义单个项目在交叉轴上的对齐方式，会覆盖 Flex 容器的align-items属性。
布局实践
创建 Flex 容器
要创建一个 Flex 容器，只需要给它的父级元素设置 display: flex 或 display: inline-flex 属性，如下所示：
---------- - -------- ----- -
或者：
---------- - -------- ------------ -
设定主轴和交叉轴
Flexbox 的 flex-direction 属性可以设置容器的主轴方向，有四个值可选，分别是：
row（默认值）：水平方向，从左到右排列。row-reverse：水平方向，从右到左排列。column：垂直方向，从上到下排列。column-reverse：垂直方向，从下到上排列。
例如，要创建一个从上到下排列的 Flex 容器：
---------- - -------- ----- --------------- ------- -
justify-content 属性可以设置主轴上的对齐方式，有以下五个值可选：
flex-start（默认值）：左对齐或上对齐。flex-end：右对齐或下对齐。center：居中对齐。space-between：平分剩余空间。space-around：全部间隔相等。
例如，要将 Flex 容器中的项目居中对齐：
---------- - -------- ----- ---------------- ------- -
align-items 属性可以设置交叉轴上的对齐方式，有以下五个值可选：
flex-start：顶端对齐或左对齐。flex-end：底端对齐或右对齐。center：居中对齐。baseline：项目的基线对齐。stretch（默认值）：如果项目未设置高度或设置为 auto，将占据整个容器的高度或宽度（取决于主轴方向）。
例如，要让 Flex 子项垂直居中：
---------- - -------- ----- ------------ ------- -
等分布局
Flexbox 可以轻松地实现等分布局，即在 Flex 容器中按相等的宽度或高度排列子项。
例如，要创建三列等宽的 Flex 子项：
---------- - -------- ----- - ----- - ----- -- -
每个 .item 元素都设置了 flex-grow: 1 属性，因此它们默认平分容器的空间。
如果要创建四行等高的 Flex 子项：
---------- - -------- ----- --------------- ------- - ----- - ----- -- -
这里我们将 flex-direction 属性设置为 column，将 Flex 容器变为垂直方向。每个 .item 元素的高度会自动填充整个容器。
自适应布局
Flexbox 也可以轻松地实现自适应布局，让 Flex 子项的宽度或高度随着内容变化而变化，不必手动设置固定值。
例如，要让 Flex 子项的宽度根据内容自适应：
---------- - -------- ----- - ----- - ----- ----- -
每个 .item 元素都设置了 flex: auto 属性，即 flex-grow: 1; flex-shrink: 1; flex-basis: auto; 的缩写。这样它们的宽度就会根据内容自动调整，不受其他 Flex 子项的影响。
类似地，要让 Flex 子项的高度根据内容自适应：
---------- - -------- ----- --------------- ------- - ----- - ----- ----- -
这里我们将 flex-direction 属性设置为 column，并将 .item 元素的 flex 属性设置为 auto。
响应式布局
Flexbox 可以轻松实现响应式布局，即根据设备和屏幕尺寸自适应调整布局。可以使用媒体查询来控制不同屏幕尺寸下的 Flexbox 布局。
例如，在小屏幕下，我们要将 Flex 容器变为垂直方向并且将 Flex 子项居中对齐：
------ ----------- ------ -
---------- -
-------- -----
--------------- -------
------------ -------
-
-这里使用了媒体查询 @media (max-width: 767px)，表示屏幕宽度小于 767 像素时应用这个样式。
可拓展的 Flexbox 布局
有时候我们需要增加 Flex 子项的数量或者删除一些元素，Flexbox 布局可以非常容易地适应这些变化。我们可以使用 Flexbox 可拓展的自适应性来实现这一点。
例如，要将 Flex 子项中的第二个元素变为两倍宽度：
---- ------------------ ---- -------------------- ---- ------------ ------------ ----------- ---- -------------------- ------
这里我们给第二个 .item 元素设置了 flex: 2，表示它的宽度是其他元素的二倍。
常见问题解答
Flex 子项溢出容器的问题怎么解决？
如果 Flex 子项的宽度或高度超出了 Flex 容器的大小，可以通过以下方式解决：
- 使用
overflow: hidden属性来隐藏超出部分； - 使用
word-break: break-word或white-space: nowrap属性来调整文本的流动方式，防止文本溢出； - 通过设置
padding或margin属性调整 Flex 子项的位置和大小。
怎么实现内容垂直居中？
可以使用 align-items: center 属性来让 Flex 子项垂直居中。如果只想让单个 Flex 子项垂直居中，可以使用 align-self: center 属性。
怎么实现左右两侧固定、中间自适应的宽度？
可以使用 flex-grow: 1 或者 flex: 1 的方式让中间的 Flex 子项自适应宽度，然后将左右两侧的 Flex 子项设置为固定的宽度即可。
例如：
---- ------------------ ---- ------------ ------------ ---- --------------- -------------- ---- ------------ ------------- ------
---------- - -------- ----- - ------ - ------ ------ - ------- - ---------- -- -- ---- ----- -- -- -
怎么实现 Flex 子项按顺序倒序排列？
可以使用 flex-direction: row-reverse 或 flex-direction: column-reverse 属性来实现倒序排列。
例如：
---------- - -------- ----- --------------- ------------ -
结论
Flexbox 布局是一种强大而灵活的布局方式，可以帮助我们实现现代网页设计中的常见布局。通过本文的介绍和实践，相信读者已经掌握了使用 Flexbox 布局的基本方法和经验，可以灵活地应用到自己的项目中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66eeba726fbf96019728951d