Flexbox 是 CSS3 中新增的一种布局模式，主要用于解决传统布局模式在实现特定布局时存在的一些问题。Flexbox 布局相比传统的布局更加灵活、可扩展性更强，同时能够在不同屏幕大小的设备上实现完美的自适应布局。
Flexbox 布局的基本概念
在开始学习 Flexbox 布局之前，我们需要先了解一些基本概念：
Flex 容器：使用 Flexbox 布局的元素称为 Flex 容器，通过设置
display: flex或display: inline-flex来将元素转换为 Flex 容器。Flex 项目：Flex 容器内的子元素称为 Flex 项目，每个 Flex 项目都能够通过
order、flex、align-self等属性来控制其在父容器内的布局。主轴：Flex 容器的主轴是 Flex 项目布局的主要方向，可以设置为从左到右、从右到左、从上到下、从下到上四个方向，通过设置
flex-direction属性来控制。交叉轴：垂直于主轴的轴称为交叉轴，用于控制 Flex 项目在交叉轴方向上的对齐方式，交叉轴可以是 Flex 容器的宽度方向或高度方向，通过设置
align-items和align-content属性来控制。
Flexbox 布局的常用属性
flex-direction：控制 Flex 容器的主轴方向，可以设置为 row（默认值）、row-reverse、column 或 column-reverse。
justify-content：控制 Flex 项目在主轴上的对齐方式，可以设置为 flex-start（默认值）、flex-end、center、space-between、space-around 或 space-evenly。
align-items：控制 Flex 项目在交叉轴上的对齐方式，可以设置为 stretch（默认值）、flex-start、flex-end、center 或 baseline。
flex-wrap：控制 Flex 项目的换行方式，可以设置为 nowrap（默认值）、wrap 或 wrap-reverse。
align-content：控制多行 Flex 项目在交叉轴上的对齐方式，可以设置为 stretch（默认值）、flex-start、flex-end、center、space-between 或 space-around。
order：控制 Flex 项目的排列顺序，数值越小的项目越靠前，默认为 0。
flex-grow：控制 Flex 项目在主轴上的增长比例，对应的值为数字类型，默认为 0。
flex-shrink：控制 Flex 项目在主轴上的收缩比例，对应的值为数字类型，默认为 1。
flex-basis：设置 Flex 项目的基准值，对应的值可以是长度类型、百分比类型或 auto。
flex：flex-grow、flex-shrink 和 flex-basis 的简写属性。
align-self：控制单个 Flex 项目在交叉轴上的对齐方式，可以设置为 auto（默认值）、flex-start、flex-end、center 或 baseline。
实例演示
下面我们通过一个实例来演示 Flexbox 布局的使用，这里我们将实现一个基于 Flexbox 布局的导航菜单：
HTML 代码：
<nav class="nav-menu">
<a href="#">首页</a>
<a href="#">关于我们</a>
<a href="#">产品中心</a>
<a href="#">联系我们</a>
</nav>CSS 代码如下：
-- -------------------- ---- ------- --------- - -------- ----- ---------------- -------------- ------------ ------- ----------------- -------- -------- ----- - --------- - - ------------- ----- ---------- ----- -
效果如下图所示：
通过设置 display: flex 将导航菜单转换为 Flex 容器，并通过 justify-content: space-between 控制 Flex 项目在主轴上的对齐方式，同时通过 align-items: center 将 Flex 项目在交叉轴上居中对齐。最后，我们为 Flex 项目设置了一些基本样式。通过这些简单的 CSS 样式，我们就实现了一个漂亮的导航菜单。
总结
Flexbox 布局为我们带来了全新的布局方式，能够更加灵活、高效地实现前端布局。掌握 Flexbox 布局的基本概念和常用属性，并不难，只需要多加练习和钻研，相信你会在不久的将来成为一个优秀的前端工程师。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469ef27968c7c53b09b6454