什么是 Flexbox 布局？
Flexbox 是一种 CSS 布局模式，它可以更方便、更灵活地实现元素的对齐、排列和伸缩。Flexbox 布局可以让我们更容易地实现自适应布局和响应式设计。它对于移动端和桌面端的应用都非常迅速和有效。
Flexbox 布局的基础语法
Flexbox 布局的语法非常简单，只需要设置父容器的 display 属性为 flex，子元素即可按照指定的方向和规则排列。
.container {
display: flex;
}设置了 display: flex; 之后，子元素将会默认采用水平方向排列。我们可以用 flex-direction 属性设置排列方向，可用的值有 row（水平排列，从左到右）、row-reverse（水平逆向排列，从右到左）、column（垂直排列，从上到下）和 column-reverse（垂直逆向排列，从下到上）。
-- -------------------- ---- ------- -- ---- -- ---------- - -------- ----- --------------- ---- - -- ---- -- ---------- - -------- ----- --------------- ------- -
Flexbox 的另一个特点是可以将容器的剩余空间自动分配到子元素上。我们可以用 flex-grow 属性来设置每个子元素所占据的空间比例，范围是 0 到任意正整数，子元素的最小宽度为 0。
.item {
flex-grow: 1; /* 子元素自动分配空间 */
}除了 flex-grow，Flexbox 还有 flex-shrink 和 flex-basis 两个属性。其中 flex-shrink 用于控制子元素在父容器宽度不够时的缩小比例；flex-basis 用于设置子元素的初始宽度，当 flex-grow 和 flex-shrink 都设置为 0 时，子元素的大小会通过 flex-basis 来控制。
.item {
flex: 1 1 200px; /* 相当于 flex-grow: 1; flex-shrink: 1; flex-basis: 200px; */
}我们还可以调整子元素在排列方向上的对齐方式。使用 justify-content 属性可以控制水平方向上的对齐方式，可用的值有 flex-start、flex-end、center、space-between（均匀分布在容器内）、space-around（均匀分布在容器内，包括两端）和 space-evenly（均匀分布在容器内，包括两端和中间）；使用 align-items 属性可以控制垂直方向上的对齐方式，可用的值有 flex-start、flex-end、center、baseline（基线对齐）和 stretch（拉伸对齐）。
/* 水平和垂直居中 */
.container {
display: flex;
justify-content: center;
align-items: center;
}最后，Flexbox 还有一个非常有用的属性：flex-wrap。默认情况下，子元素会被挤压在一行/一列中，造成溢出。使用 flex-wrap 属性可以设置子元素的换行方式，可用的值有 nowrap（不换行，会挤压宽度）、wrap 和 wrap-reverse。
/* 换行排列 */
.container {
display: flex;
flex-wrap: wrap;
}Flexbox 布局的示例
下面是一个简单的 Flexbox 布局的示例。代码中我们用 Flexbox 实现了一个简单的导航菜单，适合于各种类型的设备。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ------------
-------
-- ------ ---- -- --
----- -
-------- -----
---------- -----
---------------- -------------- -- -------- --
------------ ------- -- ------ --
----------------- -----
-------- -----
-
---------- -
---------- -- -- -------------- --
----------- -------
------ -----
---------- -------
------- - -------
-------- ------ --
-------------- -------
----------------- -----
----------- --- --- --- ------- -- -- -----
-
--------
-------
------
---- -------------
---- ----------------------------
---- -----------------------------
---- ----------------------------
---- -------------------------------
------
-------
-------总结
Flexbox 布局是一个强大且易于使用的 CSS 布局模式，它可以为我们的网站和应用程序提供更灵活、可扩展和自适应的布局效果。我们可以用它来创建响应式设计、解决排版问题，以及更快地开发复杂的 UI 界面。掌握了 Flexbox 布局的基础知识和技巧，相信你的前端开发能力会得到明显的提升。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64677326968c7c53b07d57db