什么是 Flexbox 布局？
Flexbox 是一种 CSS 布局模式，它可以让我们更轻松地创建灵活的布局，而不必使用传统的 float 和 position 属性。Flexbox 布局基于主轴和交叉轴的概念，通过设置容器和子元素的属性，实现各种复杂的布局效果。
实际应用场景
1. 响应式布局
Flexbox 布局可以很好地实现响应式布局，即根据屏幕尺寸和设备类型自动适应布局。例如，我们可以使用 Flexbox 布局将导航菜单和内容区域分别放在两个容器中，然后通过设置容器的 flex-direction 属性为 row 或 column，让它们在不同设备上呈现不同的布局效果。
-- -------------------- ---- -------
---- ------------------
---- -----------------------
---- --------------------------
------
-------
---------- -
-------- -----
--------------- ---- -- --------- --
-
----- -
----- -- -- ------ --
-
-------- -
----- -- -- -- --- --- --
-
-- --------- --
------ ----------- ------ -
---------- -
--------------- -------
-
-
--------2. 等高布局
Flexbox 布局可以很方便地实现等高布局，即让多个子元素的高度自适应最高的元素。例如，我们可以使用 Flexbox 布局将多个卡片放在同一个容器中，然后通过设置容器的 align-items 属性为 stretch，让它们的高度自适应最高的卡片。
-- -------------------- ---- -------
---- ------------------
---- --------------- -------
---- --------------- -------
---- --------------- -------
------
-------
---------- -
-------- -----
------------ -------- -- ---------- --
-
----- -
----- -- -- ------- --
------- -----
-------- -----
----------------- -----
-
--------3. 水平居中和垂直居中
Flexbox 布局可以很轻松地实现水平居中和垂直居中，即让子元素在容器中水平或垂直居中。例如，我们可以使用 Flexbox 布局将一个元素水平和垂直居中。
-- -------------------- ---- -------
---- ------------------
---- ----------------------
------
-------
---------- -
-------- -----
---------------- ------- -- ---- --
------------ ------- -- ---- --
------- ------
----------------- -----
-
---- -
------ ------
------- ------
----------------- -----
------ -----
----------- -------
------------ ------
-
--------总结
Flexbox 布局是一种非常强大和灵活的 CSS 布局模式，它可以帮助我们快速实现各种复杂的布局效果。在实际开发中，我们可以根据具体需求灵活运用 Flexbox 布局来实现响应式布局、等高布局、水平居中和垂直居中等效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657c4d24d2f5e1655d71d449