简介
CSS Flexbox 是 CSS 中一种布局方式，它可以帮助我们更容易地创建自适应和响应式的布局。Flexbox 可以将一行或一列元素进行分配，让它们按照指定的比例显示和布局。使用 Flexbox，我们无需使用复杂的计算和固定的像素宽度及高度，只需要简单地设置 Flexbox 的一些规则，就可以实现流畅的布局。
使用 Flexbox 的基本规则
使用 Flexbox 布局有以下几个基本概念：
- 父容器：也就是包含子元素的容器，可以将其设置为
display: flex来启用 Flexbox 布局。 - 主轴和侧轴：
flex-direction属性指定的轴为主轴，即 Flexbox 的主要方向。默认的主轴为水平方向（即从左到右），可以通过指定flex-direction: row-reverse改为从右到左；而flex-direction: column则将主轴设置垂直方向（即从上到下），flex-direction: column-reverse则从下到上。主轴的方向决定了 Flexbox 中子元素的排列顺序。而另一个垂直于主轴的方向就是侧轴。 - flex 容器中的子元素（flex items）：将需要定位的元素包裹在 Flexbox 容器中，使用
flex属性来控制它们在容器中的位置、大小和对齐方式。 - flex 容器中的子元素有三个属性：
flex-grow、flex-shrink、flex-basis。其中，flex-grow属性控制子元素如何在可用空间中分配剩余空间。flex-shrink属性定义了在空间不足时子元素如何缩小。flex-basis属性指定了元素在分配剩余空间之前所占据的宽度或高度。
实现多列布局
我们可以使用 Flexbox 模型来实现多列布局。我们首先必须创建一个父容器，然后将所有子元素包含在其中，如下所示：
<div class="container"> <div class="column">Column 1</div> <div class="column">Column 2</div> <div class="column">Column 3</div> </div>
然后在 CSS 文件中，我们可以将 .container 元素设置为 Flexbox 容器，并设置主轴为水平方向，如下所示：
.container {
display: flex;
flex-direction: row;
}这将使所有列元素在水平方向上排成一行。现在，我们可以设置每个列元素的 flex 属性来控制它们在容器中的相对大小和位置，如下所示：
.column {
flex: 1;
padding: 10px;
}这将把所有列元素的宽度设置为相等，并使它们填满可用空间，同时在每个列元素的内部添加了 10 像素的 padding。我们可以控制 flex 属性的值，以达到不同的效果。
处理嵌套 Flexbox 元素
处理嵌套 Flexbox 元素时，我们需要理解如何控制它们之间的区域。如果在一个 Flexbox 容器内嵌另一个 Flexbox 容器，那么内部的子元素将会以独立的 Flexbox 面板进行定位，并且它们将会被外部 Flexbox 容器包含在内部 Flexbox 容器中。在这种情况下，我们可以使用 align-self 属性来控制嵌套 Flexbox 容器中子元素的位置，如下所示：
-- -------------------- ---- ------- ------------ - -------- ----- --------------- ---- - ------------ - -------- ----- --------------- ------- ----------- ----------- -
这将把 .container-2 容器向顶部靠齐，并使其顶部对齐.container-1 容器的顶部。
使用 Flexbox 与粘性定位相结合
我们还可以将 Flexbox 与粘性定位结合使用，以创建适应屏幕的响应式布局。一个常见的用例就是制作固定导航栏。我们可以使用 Flexbox 控制其布局，并使用粘性定位使其固定在页面顶部。
-- -------------------- ---- -------
--------
-----
----
-------------
--------------
----------------
-----
------
---------
------
----------- -- -- ---------
------- -- --- ---- ------------
-------将其设置为 Flexbox 容器，主要考虑到导航栏和页面主区域的布局
header {
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
}首先设置 display: flex，使得 header 成为 Flexbox 容器；接着，使用 justify-content 属性将 nav 元素向左对齐，h1 元素向右对齐；使用 align-items 属性使 nav 元素和 h1 元素垂直居中对齐；最后，使用 position: sticky 和 top: 0 实现实现粘性定位。
总结
CSS Flexbox 可以帮助我们快速创建适应性和响应式的布局。通过设置 Flexbox 容器的主轴、子元素的比例和位置，我们可以轻松地控制页面中元素的排列和布局。无论你要创建简单的多列布局还是粘性导航栏，Flexbox 都是一个强大的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ddbc8ff6b2d6eab38f87dd