微信小程序之Flex容器详解

原文首发于微信公众号：jzman-blog，欢迎关注交流！

Flex 是 W3C 提出的一种新的布局方案，能够很是方便的完成响应式页面布局，到目前为止几乎全部浏览器都支持，Flex 是 Flexible Box 的缩写，翻译过来是"弹性布局"的意思，下面一块儿来学习 Flex 布局的使用。

1. 基础概念
2. flex容器属性
3. flex项目属性
4. 总结

基础概念

采用 Flex 布局的元素称为 Flex 容器，全部子元素将自动成为容器成员，也能够称之为 Flex 项目，也就是该 Flex 布局的子 View ,下面是 Flex 布局默认设置下的示意图：

如上图所示，默认的 Flex 容器的存在两个轴：水平的主轴(main axis)和垂直的交叉轴(cross axis)，主轴和交叉轴的方向不是绝对的，而是会由于设置的不一样而不一样，下面是与主轴和交叉轴相关的几个位置：

• 主轴起始点(main start):主轴的开始位置
• 主轴的结束点(main end):主轴的结束位置
• 主轴空间(main size):单个 Flex 项目占据的主轴空间
• 交叉轴的起始点(cross start):交叉轴的起始点
• 交叉轴的结束点(cross end):交叉轴的结束点
• 交叉轴空间(cross size):单个 Flex 项目占据的交叉轴空间

flex容器属性

1. flex-direction：设置主轴的方向，可设置的值以下：

• row：默认值，设置主轴为水平方方向，起点在左边
• row-revarse：设置主轴为水平方向，起点在右边
• column：设置主轴为垂直方向，起点在上边
• column-revarse：设置主轴为垂直方向，起点在下边

row	row-revarse	column	column-revarse

2. flex-wrap：设置如何换行，可设置的值以下：

• nowrap：默认值，不换行
• wap：自动换行
• wrap-revarse：自动换行，在第一行的上一行

nowrap	wap	wrap-revarse

3. flex-flow：flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。

4. justify-content：设置项目在主轴上的对齐方式，可设置的值以下：

• flex-start：默认值，左对齐
• flex-end：右对齐
• center：居中对齐
• space-between：两端对齐
• space-around：每一个项目两侧的间隔相等，与屏幕边缘的间隔是其余项目之间间隔的一半
• space-evenly：平均分布各个项目，与屏幕边缘的间隔与其余项目之间的间隔相等

flex-start	flex-end	center	space-between	space-around	space-evenly

5. align-items：设置项目在交叉轴上如何对齐，可设置的值以下：:默认值，若是没有项目未指定高度或设置为auto,则项目会占满整个容器的高度，可设置的值以下：

• stretch：默认值，若是没有项目未指定高度或设置为auto,则项目会占满整个容器的高度，下面图示中项目 1 就未指定高度，其他项目都指定了高度 就未指定高度
• flex-start：设置与交叉轴的起点对齐
• flex-end：设置与交叉轴的结束点对齐
• center：设置与交叉轴的重点对齐
• baseline：设置项目与项目中第一行文字基线对齐

stretch	flex-start	flex-end	center	baseline

6. align-content：设置多根轴线的对齐方式，若是只有一个轴则该属性不生效，可设置的属性以下：

• stretch：默认值，轴线占满整个交叉轴
• flex-start：设置与与交叉轴的起点对齐
• flex-end：设置与交叉轴的终点对齐
• center：设置与交叉轴的中点对齐
• space-between：设置与交叉轴两端对齐，轴线之间的间隔平均分布
• space-around：设置每根轴线两侧的间隔都相等，轴线与轴线的间隔是轴线到交叉轴边缘间隔的两倍

stretch	flex-start	flex-end	center	space-between	space-around

flex项目属性

1. order：默认值为0，设置项目的排列顺序，数值越小，排列越靠前，以下图所示：

2. flex-grow：设置项目的放大比例，默认值为0，若是存在剩余空间也不放大，以下图所示：

flow-grow=0	flow-grow=1	flow-grow设置不一样值

3. flex-shrink：设置项目的缩小比例，默认值为 1，若是项目空间不足，则项目将缩小，以下图所示：

flow-shrink=1	flow-shrink=0	flow-shrink设置不一样值

上面图示中，当 flex-shrink 全设置为 0，每一个项目不会缩放，因此第四个方块被挤出去了，而相应的设置 flex-shrink 为 1，则能够在空间不足是进行必定程度的缩放。

4. flex-basis：项目所占的主轴空间，以下图所示：

5. align-self：定义元素自身的对齐方式，该属性与 align-items 属性差很少，具体就不一一介绍了，直接上效果图以下：

auto	stretch	flex-start	flex-end	center	baseline

上面的效果中设置 auto 会跟随 flex 容器中 align-items 的设置。

5. flex：flex 是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为0 1 auto，这里就不在贴效果图了。

总结

最近尝试了一下微信小程序，感受开发起来难度也不是很大，以为本篇文章的内容也是微信小程序中最重要的内容了，原本打算继续进行小程序系列的学习，可是看了一下后面的内容无非就是小程序各个组件的使用了，若是有其余项目的开发经验，实在不必一个组件一个组件去验证学习，因此小程序的学习就到此为止，最后，说一点微信小程序最重要的我以为仍是 Flex 布局。能够选择关注我的微信公众号：jzman-blog 获取最新更新，一块儿交流学习!