什么是 Flexbox 布局？
Flexbox 布局是一种基于 CSS 的布局模型，它可以使我们更简单、更有效地管理 Web 应用程序中的布局。使用 Flexbox 布局，您可以更加轻松地排列具有不同大小和形状的元素，而无需使用传统的 float 和 position 属性。
Flexbox 的最大优点在于它是一种自适应布局，指的是它可以根据我们的设计灵活地调整，而不会受到浏览器或设备大小的限制。它是当今前端开发必不可少的一项技能。
基本使用
Flexbox 布局有两个重要的组成部分：容器和项目。容器是一组元素的父级，而项目是容器中的元素。
要使用 Flexbox 布局，您需要在容器上应用 display:flex 属性。然后，您可以在容器内应用各种属性来控制项目的排列。
以下是一个使用 Flexbox 布局的基本示例：
-- -------------------- ---- -------
--------- -----
------
------
-------
---------- -
-------- -----
---------------- -------
------------ -------
------- ------
----------------- --------
-
----- -
------ ------
------- ------
----------------- -----
------ -----
----------- -------
------------ ------
------- -----
-
--------
-------
------
---- ------------------
---- --------------------
---- --------------------
---- --------------------
------
-------
-------在这个示例中，我们定义了一个容器，并在其中拥有三个项目，每个项目都有一个背景颜色和文本。我们使用 display:flex 属性来定义容器为 Flexbox 布局，并使用 justify-content 和 align-items 属性来控制项目的排列。
Flexbox 的主要属性
Flexbox 布局中的每个项目都可以使用以下属性来控制它们在容器中的位置和其他属性：
- flex-direction：指定项目的排列方向。可以是 row（水平排列）或 column（垂直排列）。
- flex-wrap：指定项目的换行方式，可以是 nowrap（不换行），wrap（自动换行），以及 wrap-reverse。
- justify-content：指定项目在主轴上的对齐方式，包括 flex-start、flex-end、center、space-between 以及 space-around。
- align-items：指定项目在交叉轴上的对齐方式，包括 flex-start、flex-end、center、baseline 和 stretch（默认值，项目被拉伸以填充容器）。
- align-content：用于多行项目的对齐方式，只有在 flex-wrap:wrap 的情况下才有效，包括 flex-start、flex-end、center、space-between、space-around 以及 stretch。（单行项目没有效果）
此外还有个别元素的属性：
- flex-grow：指定项目的放大比例，默认为 0，即不放大。
- flex-shrink：指定在空间不足时项目的缩小比例，默认为 1，即缩小与容器同等比例。
- flex-basis：指定项目在分配多余空间之前的初始值。可以是像素值或百分比。（默认值为 auto）
用 Flexbox 布局实现两栏布局
下面的代码演示了如何使用 Flexbox 布局实现一个简单的两栏布局：一个固定的侧栏，一个自适应的内容区。
-- -------------------- ---- -------
--------- -----
------
------
-------
---------- -
-------- -----
--------------- ----
------- ------
-
-------- -
------ ------
----------------- --------
-
-------- -
----- --
----------------- -----
-
--------
-------
------
---- ------------------
---- -------------------------
---- -------------------------
------
-------
-------在这个示例中，我们定义了一个容器，该容器包含两个项目：侧边栏和内容区。我们使用 flex-direction:row 将它们水平排列，并使用 flex:1 将内容领域设置为自适应宽度。侧栏则保持 200 像素的宽度。
用 Flexbox 布局实现居中
Flexbox 布局让居中变得非常容易。例如，下面的代码将一个带有不同高度和宽度的项目居中：
-- -------------------- ---- -------
--------- -----
------
------
-------
---------- -
-------- -----
---------------- -------
------------ -------
------- ------
----------------- --------
-
----- -
------ ------
------- -----
----------------- -----
------ -----
----------- -------
------------ -----
-
--------
-------
------
---- ------------------
---- ------------ -------------- ----------------
---- ------------ ------------- -----------------
---- ------------------------
------
-------
-------在这个示例中，我们将容器设置为水平和垂直都居中。这让项目成了纵横不规则的即使是纵横尺寸不同的情况下也能进行对齐。这正是 Flexbox 布局的威力所在。
结论
Flexbox 布局是 Web 前端开发中必须了解的一种技术，它使网页布局变得更加简单、快捷和方便。此外，它细致的组成部分，使对于网站的设计师、UI 设计师等对于布局的要求完美呈现。
掌握了 Flexbox 布局的基本知识和实践经验，才能让前端设计元素更加自由、多样化，方便性得到提升。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fc9f9d447136260170c98d