在移动端设计布局时，一个灵活、强大而简单的工具是 Flexbox。Flexbox 是一种布局模式，它使我们能够更加方便地控制元素在容器中的对齐方式、分布方式、间距等。在本文中，我们将介绍 Flexbox 的基本概念及其在移动端设计中的应用。
什么是 Flexbox？
Flexbox 是一种用于布局的 CSS3 模块，它可以使我们更加方便地控制元素在容器中的摆放方式。使用 Flexbox，我们可以改变元素在容器中的排列方向、间距、对齐方式等。使用 Flexbox 布局时，不必再使用旧的布局方式（如浮动和定位），使得布局代码更加简单、灵活。
如何使用 Flexbox？
使用 Flexbox 布局时，需要先设置容器的属性 display:flex。然后，可以使用一些属性来控制其子元素的排列方式。下表列出了一些常用的 Flexbox 属性：
| 属性 | 含义 |
|---|---|
flex-direction |
定义主轴方向 |
flex-wrap |
定义是否换行 |
justify-content |
定义主轴上的对齐方式 |
align-items |
定义侧轴上的对齐方式 |
align-content |
定义侧轴上多行的对齐方式 |
flex |
定义项目的扩展比例、收缩比例和基准大小 |
flex-direction
flex-direction 属性用于定义 Flexbox 容器的主轴方向。默认值是 row，表示主轴水平，侧轴垂直。
flex-direction: row | row-reverse | column | column-reverse;
上述值分别表示：
row：默认值，主轴为水平方向；row-reverse：主轴为水平方向，但是排列顺序为反向；column：主轴为垂直方向；column-reverse：主轴为垂直方向，但是排列顺序为反向。
flex-wrap
flex-wrap 属性控制容器中的子元素是否换行。默认为 nowrap，表示不换行。如果空间不足以容纳所有的子元素，可以使用下述值：
flex-wrap: nowrap | wrap | wrap-reverse;
上述值分别表示：
nowrap：不换行，缩小子元素来适应容器；wrap：换行，并从上方开始排列；wrap-reverse：换行，并从下方开始排列。
justify-content
justify-content 属性控制子元素在主轴上的对齐方式。默认值为 flex-start，表示从主轴起始位置开始排列。
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
上述值分别表示：
flex-start：默认值，从主轴起始位置开始排列；flex-end：从主轴结束位置开始排列；center：在主轴上居中排列；space-between：在主轴上平均分配间距，子元素之间没有空隙；space-around：在主轴上平均分配间距，子元素之间有空隙；space-evenly：在主轴上平均分配间距，包括首尾两端。
align-items
align-items 属性控制子元素在侧轴上的对齐方式。默认值为 stretch，表示子元素拉伸以适应容器高度。
align-items: stretch | flex-start | flex-end | center | baseline;
上述值分别表示：
stretch：默认值，子元素拉伸以适应容器高度；flex-start：在侧轴起始位置排列；flex-end：在侧轴结束位置排列；center：在侧轴上居中排列；baseline：在基线上排列。
align-content
align-content 属性控制容器内多个行之间的间距。默认值为 stretch，表示自动拉伸以适应容器高度。
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
上述值分别表示：
stretch：默认值，自动拉伸以适应容器高度；flex-start：在侧轴起始位置排列；flex-end：在侧轴结束位置排列；center：在侧轴上居中排列；space-between：平均分配间距，没有空白间距；space-around：平均分配间距，包括首尾两端。
flex
flex 属性是一个三合一的属性，用于定义一个项目的扩展比例、收缩比例和基准大小。
flex: 1 1 10%;
上述值分别为：
flex-grow：扩展比例，默认为 0；flex-shrink：收缩比例，默认为 1；flex-basis：基准大小，默认为auto；
实例代码
下面是一个使用 Flexbox 布局的示例代码，运行示例将会得到一个在移动端上优美、灵活的布局。
HTML 代码：
-- -------------------- ---- -------
---- ------------------
---- ---------- ------
---- -------------------
---- -------------------
---- -------------------
------
---- ---------- ------
---- -------------------
---- -------------------
------
---- ---------- ------
---- -------------------
---- -------------------
---- -------------------
---- -------------------
------
------CSS 代码：
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------------- ------- - ---- - -------- ----- ---------- ----- ---------------- ------- -------------- ----- - ---- - -------- ----- ---------------- ------- ------------ ------- ----------------- -------- ------ ----- -------------- ----- ------- ---- -------- ----- ---------- ----- ----- - - -- ---------- ------ - ----- ------------------ ----- ----------------- - ----- - - -- -
在这个示例中，我们使用 flex-wrap 属性使得容器能够在宽度不够时自动换行，使用 justify-content 属性居中排列子元素。而子元素则使用 flex 属性设置扩展比例、收缩比例和基准大小，从而在不同设备尺寸下具有不同的弹性。另外，我们还使用了 .row1 .col:nth-child(1), .row1 .col:nth-child(3) 这样的选择器来对某些子元素进行针对性的调整。
结论
使用 Flexbox 布局，不仅能使代码更加简洁、灵活，而且还可以提供在不同设备上更好的视觉效果。使用上述提到的 Flexbox 属性及其组合，能够实现多种布局方式。在移动端中使用 Flexbox 布局，能够提高用户体验，是一种值得推荐的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f39925f40ec5a964e3524f