微信小程序（Flex布局-容器属性）

前言

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

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

容器与项目元素

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

主轴与交叉轴

在介绍各个属性之前，需要先明确一个坐标轴
水平方向的是主轴（main axis），垂直方向的是交叉轴（cross axis）。下图为默认情况下。

项目是在主轴上排列，排满后在交叉轴方向换行。需要注意的是，交叉轴垂直于主轴，它的方向取决于主轴方向。

容器与项目元素 布局属性

容器属性：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的反方向。主轴纵向，项目排列方向从下指向上。

(2)flex-wrap 属性

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

flex-wrap: nowrap（默认值） | wrap | wrap-reverse

nowrap（默认值）： 不换行。如果单行内容过多，则溢出容器。
wrap： 容器单行容不下所有项目时，换行排列。
wrap-reverse： 容器单行容不下所有项目时，换行排列。换行方向为wrap时的反方向。

(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： 项目在容器中等间距排列。

(4)align-item 属性

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

align-items:stretch（默认值） | flex-start | center | flex-end | baseline

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

(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： 行间间距、以及首行离交叉轴起点和尾行离交叉轴终点距离相等。

项目属性

(1)order 属性

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

.item{
  order: 0（默认值） | <integer>
}

(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