微信小程序的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，而是表示在计算“总基准值”时不预留该元素的尺寸。
（—完—）
- 发表于:
- 原文链接：https://kuaibao.qq.com/s/20180730G1YFDD00?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
