介绍
在前端开发中，布局一直是一个非常基础也非常重要的部分。以前我们使用的经典布局方法如 Float 和 Positioning 已经不能满足我们对于响应式布局和页面排版的需求。而 Flexbox 布局在解决这些问题上表现得十分优秀，成为了现代 Web 布局的主流方法。
本文主要介绍了 Flexbox 布局的相关概念、属性和一些实践案例，帮助读者更好地理解和应用 Flexbox 布局。
概念
Flexbox 整个布局是由主轴和交叉轴两个方向组成，其中主轴定义了 Flex 容器（flex container）中的主要方向，交叉轴则垂直于主轴。
一个 Flexbox 布局至少包含一个 Flex 容器，该容器是指将使用 Flexbox 进行布局的父元素。而这个容器的内部可能包含多个 Flex 项目（flex item）组成的 Flex 容器。这些项目可沿主轴或交叉轴进行对齐和间隔设置，从而构建出不同的页面布局设计。
属性
在 Flexbox 布局中，有以下常用的 Flex 容器和 Flex 项目属性：
容器属性
display: 设置 Flex 容器，取值为flex或inline-flex。flex-direction: 设置主轴方向，取值为row（默认）、row-reverse、column、column-reverse。flex-wrap: 设置是否换行，取值为nowrap（默认）、wrap、wrap-reverse。justify-content: 设置主轴对齐方式，取值为flex-start（默认）、flex-end、center、space-between、space-around。align-items: 设置交叉轴对齐方式，取值为stretch（默认）、flex-start、flex-end、center、baseline。align-content: 设置多行对齐方式，取值与align-items相同。
项目属性
order: 设置项目的排列顺序，值越小越靠前。flex-grow: 设置项目的放大比例，默认为 0，即不放大。如果存在剩余空间，Flexbox 将按照放大比例进行划分。flex-shrink: 设置项目的缩小比例，默认为 1，即如果空间不足时，该项目自动缩小。flex-basis: 设置项目的基准尺寸，即项目在弹性盒模型中所占的原始尺寸。flex: 是flex-grow、flex-shrink和flex-basis的一个缩写形式，依次为这三个属性设置值。align-self: 设置单个项目的对齐方式，取值与align-items相同。
实践
以下是一些常见的 Flexbox 布局实例：
垂直居中
实现一个通过 Flexbox 布局实现在屏幕中垂直居中的效果的代码示例：
-- -------------------- ---- -------
-------
---------- -
------ ------
------- ------
------- --- ----- -----
-------- -----
---------------- -------
------------ -------
-
-------- -
----------- --------
-------- -----
------- --- ----- -----
-
--------
---- ------------------
---- ----------------
---------------
------
------在上面的代码中，.container 是 Flex 容器，设置了 display: flex、justify-content: center 和 align-items: center，实现了在屏幕中垂直水平居中的效果。
左侧固定宽度，右侧自适应宽度
实现一个左侧固定宽度，右侧自适应宽度的效果的代码示例：
-- -------------------- ---- -------
-------
---------- -
-------- -----
--------------- ----
---------------- -----------
------------ -------
-
----- -
------ ------
------- -----
----------------- --------
-
------ -
----- --
------- -----
----------------- -----
-
--------
---- ------------------
---- -------------------
---- --------------------
------在上面的代码中，.container 设置为 Flex 容器，.left 设置了一个宽度为 100px 的固定宽度，而 .right 的宽度使用了 flex: 1 实现自适应宽度。
等分宽度
实现一个等分宽度的效果的代码示例：
-- -------------------- ---- -------
-------
---------- -
-------- -----
---------------- --------------
-
---- -
------ --------- - - - ------
------- -----
----------------- --------
-
--------
---- ------------------
---- ------------------
---- ------------------
---- ------------------
------在上面的代码中，.container 设置为 Flex 容器，.box 的宽度使用了 calc 函数，值为 100% / 3 - 20px，实现了等分宽度的效果。
总结
以上是 Flexbox 布局相关的概念、属性和实践案例的介绍，希望能对大家学习和应用 Flexbox 布局时有所帮助。灵活地使用 Flexbox 布局能够更好地适应不同的页面设计和布局需求，成为 Web 布局的一种非常重要的方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646a3cc8968c7c53b09efd86