前言

微信小程序 View视图标签支持两种布局方式:Block 和 Flex

注意:
所有 View 默认都是 block浮动布局,所以如果要使用 flex 布局的话需要进行显式声明
blog_wxmini_flex_01

容器与项目元素

日常开发中,采用flex布局的元素,一般简称为“容器”
容器内的元素简称为“项目”或者“元素”
blog_wxmini_flex_02

主轴与交叉轴

在介绍各个属性之前,需要先明确一个坐标轴
水平方向的是主轴(main axis),垂直方向的是交叉轴(cross axis)。下图为默认情况下。
blog_wxmini_flex_03 项目是在主轴上排列,排满后在交叉轴方向换行。需要注意的是,交叉轴垂直于主轴,它的方向取决于主轴方向。
blog_wxmini_flex_04

容器与项目元素 布局属性

容器属性:flex-flow、flex-direction、flex-wrap、justify-content、align-items、align-content
元素/项目属性:order、flex-grow、flex-shrink、flex-basis、flex、align-self

flex不单是一个属性,还包含了一套新的属性集
属性集包括设置容器和项目两部分

设置容器的属性:

//①弹性盒模型
display:flex;
//②元素的排列方向
flex-direction:row(默认值) | row-reverse | column |column-reverse
//③元素是否换行
flex-wrap:nowrap(默认值) | wrap | wrap-reverse  
//④项目元素在主轴上的对齐方式
justify-content:flex-start(默认值) | flex-end | center |space-between | space-around | space-evenly | wrap-reverse
//⑤元素在交叉轴的对齐方式
align-items:stretch(默认值) | center  | flex-end | baseline | flex-start
//⑥多行元素在交叉轴的对齐方式
align-content:stretch(默认值) | flex-start | center |flex-end | space-between | space-around | space-evenly

设置项目的属性:

//①多余空间时元素放大比例
flex-grow:0(默认值) | <number>
//②空间不足时元素缩小比例
flex-shrink:1(默认值) | <number>
//③元素在主轴上占据空间
flex-basis:auto(默认值) | <length>
//④flex 是grow、shrink 、basis的简写 
flex:none | auto | @flex-grow @flex-shrink @flex-basis
//⑤元素的排列顺序
order:0(默认值) | <integer>
//⑥单独对某个元素设置交叉轴对齐方式
align-self:auto(默认值) | flex-start | flex-end |center | baseline| stretch

容器属性

(1)flex-direction 属性

元素的排列方向

flex-direction:row(默认值) | row-reverse | column |column-reverse

row(默认值): 主轴横向,项目排列方向为从左指向右。
row-reverse: row的反方向。主轴横向,项目排列方向为从右指向左。
column: 主轴纵向,项目排列方向从上指向下。
column-reverse: column的反方向。主轴纵向,项目排列方向从下指向上。
blog_wxmini_flex_05

(2)flex-wrap 属性

设置是否允许项目多行排列,以及多行排列时换行的方向。

flex-wrap: nowrap(默认值) | wrap | wrap-reverse

nowrap(默认值): 不换行。如果单行内容过多,则溢出容器。
wrap: 容器单行容不下所有项目时,换行排列。
wrap-reverse: 容器单行容不下所有项目时,换行排列。换行方向为wrap时的反方向。
blog_wxmini_flex_06

(3)justify-content 属性

设置项目在主轴方向上对齐方式,以及分配项目之间及其周围多余的空间(通常对应于某一行项目排列)。

justify-content: flex-start(默认值) | flex-end | center | space-between | space-around| space-evenly

flex-start(默认值): 从主轴起点排列,项目间不留空隙。
center: 项目在主轴上居中排列,项目间不留空隙。
flex-end: 项目对齐主轴终点,项目间不留空隙。
space-between: 项目之间距离相等,但是,处在两端的项目与容器边靠紧。
space-around: 与space-between相似。但是,处在两端的项目与容器边距离为,项目之间距离的一半。
space-evenly: 项目在容器中等间距排列。
blog_wxmini_flex_07

(4)align-item 属性

设置项目在某一行中的对齐方式。

align-items:stretch(默认值) | flex-start | center | flex-end | baseline

stretch(默认值): 项目拉伸至填满行高。
flex-start: 项目顶部与行起点对齐。
center: 项目在行中居中对齐。
flex-end: 项目底部与行终点对齐。
baseline: 项目的第一行文字的基线对齐。
blog_wxmini_flex_08

(5)align-content 属性

项目在多行排列时,设置行在交叉轴方向上的对齐方式,以及分配行之间及其周围多余的空间。

align-content: stretch(默认值) | flex-start | center | flex-end | space-between |space-around | space-evenly

stretch(默认值): 当未设置项目尺寸,将各行中的项目拉伸至填满交叉轴。当设置了项目尺寸,项目尺寸不变,项目行拉伸至填满交叉轴。
flex-start: 首行在交叉轴起点开始排列,行间不留间距。
center: 行在交叉轴中点排列,行间不留间距,首行离交叉轴起点和尾行离交叉轴终点距离相等。
flex-end: 尾行在交叉轴终点开始排列,行间不留间距。
space-between: 行与行间距相等,首行离交叉轴起点和尾行离交叉轴终点距离为0。
space-around: 行与行间距相等,首行离交叉轴起点和尾行离交叉轴终点距离为行与行间间距的一半。
space-evenly: 行间间距、以及首行离交叉轴起点和尾行离交叉轴终点距离相等。
blog_wxmini_flex_09 blog_wxmini_flex_10 blog_wxmini_flex_11

项目属性

(1)order 属性

设置项目沿主轴方向上的排列顺序,数值越小,排列越靠前。属性值为整数。

.item{
  order: 0(默认值) | <integer>
}

blog_wxmini_flex_12

(2)flex-shrink 属性

当项目在主轴方向上溢出时,通过设置项目收缩因子来压缩项目适应容器。属性值为项目的收缩因子,属性值取非负数。

.container{
  display: flex;
  width: 400px; // 容器宽度为400px
}
.item1{
  width: 120px;
  flex-shrink: 2;
}
.item2{
  width: 150px;
  flex-shrink: 3;
}
.item3{// 项目3未设置flex-shrink,默认flex-shrink值为1
  width: 180px;
}

一个宽度为400px的容器,里面的三个项目width分别为120px,150px,180px。分别对这项目1和项目2设置flex-shrink值为2和3。

分析:
在这个例子中,项目溢出 400 - (120 + 150 + 180) = -50px。计算压缩量时总权重为各个项目的宽度乘以flex-shrink的总和,这个例子压缩总权重为120 * 2 + 150 * 3+ 180 * 1 = 870。各个项目压缩空间大小为总溢出空间乘以项目宽度乘以flex-shrink除以总权重:
item1的最终宽度为:120 - 50 * 120 * 2 / 870 ≈ 106px
item2的最终宽度为:150 - 50 * 150 * 3 / 870 ≈ 124px
item3的最终宽度为:180 - 50 * 180 * 1 / 870 ≈ 169px
其中计算时候值如果为小数,则向下取整。

(3)flex-grow 属性

当父元素的宽度大于子元素宽度之和时,并且父元素有剩余,此时flex-grow就可以使得子元素扩张,分享父元素的空间

.container{
  display: flex;
  width: 400px; // 容器宽度为400px
}
.item1{
  width: 50px;
  flex-grow: 0;
}
.item2{
  width: 50px;
  flex-grow: 1;
}
.item3{
  width: 50px;
  flex-grow: 2;
}

分析:
项目1:扩张因子为0默认值,则不会索取父级多余空间
项目2:扩张因子为1,会索取剩余空间,最终大小为
自身宽度(50px)+获取的剩余空间宽度250×(1/(1+2))=133.33px
项目3:扩张因子为2,会索取剩余空间,最终大小为
自身宽度(50px)+获取的剩余空间宽度250×(2/(1+2))=216.67px

(4)flex-basis 属性

当容器设置flex-direction为row或row-reverse,flex-basis和width同时存在,flex-basis优先级高于width,也就是此时flex-basis代替width属性。
当容器设置flex-direction为column或column-reverse,flex-basis和height同时存在,flex-basis优先级高于height,就是此时flex-basis代替height属性。
需要注意的是,当flex-basis和width(或height),其中一个属性值为auto时,非auto的优先级更高。

.item1{
  /* width: 50px; */
  flex-basis: 100px; // 优先级 高
  flex-shrink: 0.5;
}

(5)flex 属性

本质:flex-grow,flex-shrink,flex-basis的简写方式。
值设置为none,等价于00 auto。值设置为auto,等价于1 1 auto。

(6)align-self 属性

设置项目在行中交叉轴方向上的对齐方式,用于覆盖容器的align-items,可以对项目的对齐方式做特殊处理。 默认属性值为auto,继承容器的align-items值,当容器没有设置align-items时,属性值为stretch。

align-self: auto(默认值) | flex-start | center | flex-end | baseline |stretch

blog_wxmini_flex_13