微信小程序开发入门教程（九）

背景

上一篇文章我们已经介绍了微信小程序布局相关内容，介绍了块级元素、行内元素和行内块元素，与此同时还介绍了浮动与定位，如何解决浮动引起的高度坍塌问题。浮动和定位是基于盒子模型传统的布局解决方案，它在处理一些特殊布局时特别不方便，比如垂直居中，2009年W3C提出了一种新的方案Flex，给传统的盒子模型带来了更大的灵活性，微信小程序的WXSS也对其进行来实现。

Flex布局基本概念

Flex布局主要由容器和项目构成，采用Flex布局的元素成为Flex元素，它所有的子元素自动成为容器成员。可以通过设置display属性为flex或inline-flex将任何一元素指定为Flex布局。如下图所示，容器默认存在两根轴，水平的主轴和垂直的交叉轴，主轴开始的地方叫main start，结束的地方叫main end;交叉轴开始的地方叫cross start,交叉轴结束的地方叫cross end，项目默认沿主轴从主轴开始的地方到主轴结束的位置进行排列，项目在主轴上占据的空间叫main size，在交叉轴上占据的空间叫cross size。

容器属性

display

display用来指定该元素是否为Flex布局，其属性值如下：

• flex：用于产生块级Flex布局
• inline-flex：用于产生行内Flex布局，行内容器符合行内元素的特性，同时容器内又符合Flex布局规范。
  设置Flex布局以后，子元素的float、clear和vertical-align属性将会失效。

flex-direction

flex-direction用于指定主轴的方向，即项目排列的方向，其有四个值如下：

• row主轴为水平方向，起点在左边，默认值
• row-reverse：主轴为水平方向，起点在右边
• colum：主轴为垂直方向，起点在上沿
• colum-reverse：主轴为垂直方向，起点在下沿

flex-wrap

默认情况下，项目都会排成一条线，flex-wrap用来指定如果一条轴线排不下该如何换行，其有三个值

• nowarap：不换行，这是默认值
• wrap：换行，第一行在上方
• wrap-reverse：换行，第一行在下方

当设置换行时，还需要设置align-item属性配合自动换行，并且align-item值不能为stretch

flex-flow

flex-flow是flex-wrap和flex-direction的简写形式，其默认值是row nowarp。

justify-content

justify-content属性定义了项目在主轴上的对齐方式，其有五个值：

• fix-start：左对齐，默认值
• fix-end：右对齐
• center：剧中
• space-between：两端对齐，项目之前的间隔都相等
• space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与边框间的间隔大一倍

align-items

align-items指定项目在交叉轴上如何对齐，其有5个值。

• fix-start：交叉轴起点对齐
• fix-end：交叉轴终点对齐
• center：交叉轴中间线对齐
• baseline：项目根据他们第一行文字的基线对齐
• stretch：如果项目未设置高度或设置为auto，项目将在交叉轴方向拉伸充满整个容器，默认值

align-content

align-content用来定义项目多根轴线（出现换行后）在交叉轴线上的对齐方式，如果项目只有一根轴线，该属性不起作用，其有6个值。

• flex-start：与交叉轴的起点对齐
• flex-end：与交叉轴的终点对齐
• flex-center：与交叉轴中点对齐
• flex-between：与交叉轴两端对齐，轴线之间的间隔平均分配
• space-around：每根轴线两侧的距离都相等，轴线之间的间隔比轴线与边框的间隔大一倍
• stretch：轴线占满整个交叉轴，每个项目都会被拉伸至填满交叉轴，默认值

项目属性

order

order属性定义项目的排列顺序，数值越小，排列越靠前。

flex-grow

flex-grow定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大，如果有剩余的空间，整体按比例填充剩余的空间。

flex-shrink

flex-shrink定义了项目的缩小比例，默认为1，如果空间不足，该项目将缩小，每个项目需要缩小的值按flex-shrink比例计算，值越大缩小的就越多。

flex-basis

flex-basis属性用来定义伸缩项目的基准值，剩余的空间将按比例进行缩放，它的默认值是auto，即按项目本来大小。

flex

flex是flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto，该属性有两个快捷值auto（1 1 auto）和none（0 0 auto）。建议优先使用这个属性。

align-self

align-self用来设置单独的伸缩项目在交叉轴上的对齐方式，该属性有6个值，除了auto，其余和align-items属性完全一致。

• auto：表示继承容器的align-items，如果没有父元素，则等同于stretch，默认值
• flex-start：交叉轴起点对齐
• flex-end：交叉轴终点对齐
• center：交叉轴中线对齐
• baseline：根据第一行文字基线对齐
• stretch：如果项目未设置高度或设置为auto，项目将在交叉轴方向拉伸充满整个容器，默认值

最后

有兴趣可以关注公众号QStack，会定时分享一些文章和免费的学习资源。