微信小程序的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 删除。

扫码关注腾讯云开发者

领取腾讯云代金券