Flex 布局
Flex 是 2009 年，W3C 提出的一种新的布局适配方案，通过 Flex布局，可以简便、完整、响应式的实现各种页面布局。经过这些年的发展，已经得到了所有浏览器的支持，基本上可以让我们放心使用。 Flex 布局是 FlexibleBox 的缩写，直译过来就是 “弹性盒子”，它也是基于 “盒子” 模型，将 UI 切割成一个一个小的盒子，来进行 UI 布局。
Flex 如何使用
概述 Flex 的使用非常的简单，你只需要将 display 设置为 flex 就可以了。
display 除了 flex 还有一些其他可选参数，例如：
- block：指定一个块级布局，它其内的元素，总是起一个新行来显示，而微信小程序的很多视图容器组件，默认的 displa 就是block，例如：view、scroll-view、swiper 等。
- flex：指定为 Flex 布局，它可以在盒子内显示子元素。
举个例子，看一下效果图：
在这里，当不做特殊设置的时候，默认为display:block的状态，其内的每一个元素，都另起一行去展示。display:flex的话，我们就可以自由设置其内元素的布局形式
Flex 的方向轴
在Flex 布局中，天然存在两根方向轴： 主轴 和 交叉轴 。交叉轴在有些地方又被称为侧轴，其实是一个概念。
在默认情况下，主轴是沿着水平方向延伸，而交叉轴则正好与主轴呈交叉状态。 但是这并非不可改变，我们可以通过 flex-direction属性，来改变主轴的方向，交叉轴的方向是相对于主轴存在的，当改变主轴方向后，交叉轴也被同时改变。
Flex布局是通过一些属性来控制效果的，和我们正常写一个移动 App 是一样的，有一些属性是作用在父容器中的，有一些是作用在其内的子元素上的。
Flex 在父容器上的属性
在父容器上，存在的属性有：
- flex-direction：指定主轴的方向。
- flex-flow：flex-direction 和 flex-wrap 两个属性的组合简写形式。
- align-items：子元素在交叉轴上的排列方向。
- align-content：多根轴线的对齐方式。
这几个，除了 align-content都是相对比较常用的属性。
1) flex-direction
flex布局有两条轴，它们是交叉相对的，分为主轴和交叉轴。我们可以通过
flex-direction来确定主轴的方向，同时交叉轴的方向也被确定了。row：默认值，主轴水平方向，起始点在左边
- row-reverse：主轴水平方向，起始点在右边。
- column：主轴垂直方向，起始点在上边。
- column-reverse：主轴垂直方向，起始点在下边。
效果图：
2）flex-wrap
flex-wrap 属性用来确定，父容器内，当单行已经无法包容所有子元素之后，如何换行。- nowrap：不换行，此为默认值。
- wrap：超出单行的时候，自然换行。
- wrap-reverse：超出单行的时候，沿着底部翻转方向，自然换行。
css 里就是有很多属性是带有 xxx-reverse 参数的，大多数情况下我们也用不上。
作者：廖正永
原文链接点击这里