微信小程序的WCSS相比传统的CSS，最大的优势在于Flex布局

传统CSS的布局方案，主要是基于盒状模型，依赖于 display属性 + position属性 + float属性。这种布局最大的问题是垂直方向上的布局不够灵活（只能使用absolute定位或者备受争议的vertical-align）。

2009年，W3C提出了一种新的布局方案—Flex布局（Flex是Flexible Box的缩写，意为“弹性布局”）。与其他CSS3一样，在网页上运用时一般都要加上前缀（比如对于Webkit内核的浏览器，必须加上-webkit前缀），特别是对于IE浏览器，要到IE10及以上才支持Flex布局（详见图1）。因此，对于传统的网页而言，Flex布局应用的比较少。

∆图1：Flex布局的浏览器支持情况

总之，微信小程序的WCSS相比传统的CSS，最大的优势在于Flex布局，新学者必须要掌握。

下面，我们通过1张图和2张表，来快速掌握Flex布局的用法：

首先，我们先了解一下Flex布局的概况（见图2），容器有两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），按照“上下左右”的规则来记忆，

对于水平的主轴，先“左”后“右”，左边是起点（start），右边是终点（end）；

对于垂直的交叉轴，先“上”后“下”，上面是起点（start），下面是终点（end）。

∆图2：Flex布局的概况

接下来，分析Flex布局的2种类型的属性：容器属性和（容器内的）项目属性。

（1）容器属性

∆表1：容器属性

（2）（容器内的）项目属性

∆表2：（容器内的）项目属性

【附：几个注意的要点】

（1）flex布局可以嵌套。即flex item上又可以使用display:flex。

（2）主轴和交叉轴互换。如果使用了flex-direction: column，则主轴为垂直方向（用justify-content控制），交叉轴为水平方向（用align-items控制）。

（3）在小程序中，CSS3的属性可以放心使用。由于微信内置的是现代浏览器，一些CSS3的属性不需要写前缀，包括一些元素选择器（比如nth-child）也可以直接使用。

（4）flex-basis可取0%。这个属性比较复杂，当它取0%时，并不表示该元素的尺寸为0px，而是表示在计算“总基准值”时不预留该元素的尺寸。

（—完—）