微信小程序之flex布局笔记

微信小程序之flex布局笔记

采用flex布局的元素，我们称之为"容器"
基本概念：
flex是一种灵活的布局模型，使容器能通过改变里面项目的高宽、顺序、来对可用空间实现最佳的填充，方便适配不同的大小的内容区域。（说的比较抽象）
**flex不单是一个属性，它包含了一套新的属性集。**属性集分为两类：设置容器、用于设置项目。
设置容器的属性：

display:flex;
flex-direction:row（默认值） | row-reverse | column |column-reverse；
flex-wrap:nowrap（默认值） | 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；

设置项目的属性：

order:0（默认值） | <integer>；
flex-shrink:1（默认值） | <number>
flex-grow:0（默认值） | <number>
flex-basis:auto（默认值） | <length>
flex-basis:auto（默认值） | <length>
flex:none | auto | @flex-grow @flex-shrink @flex-basis
align-self:auto（默认值） | flex-start | flex-end |center | baseline| stretch

1. 认识主轴
   水平方向的是主轴（main axis），垂直方向的是交叉轴（cross axis）。下图为默认情况下。
   
   项目是在主轴上排列，排满后在交叉轴方向换行。需要注意的是，交叉轴垂直于主轴，它的方向取决于主轴方向。
   
2. 容器属性
   flex-direction属性

.container{
  flex-direction: row（默认值） | row-reverse | column | column-reverse
}

row（默认值）： 主轴横向，项目排列方向为从左指向右。
row-reverse： row的反方向。主轴横向，项目排列方向为从右指向左。
column： 主轴纵向，项目排列方向从上指向下。
column-reverse： column的反方向。主轴纵向，项目排列方向从下指向上。

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

.container{
  flex-wrap: nowrap（默认值） | wrap | wrap-reverse
}

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

justify-content 属性
设置项目在主轴方向上对齐方式，以及分配项目之间及其周围多余的空间（通常对应于某一行项目排列）。

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

align-items属性
设置项目在某一行中的对齐方式。

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

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

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

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



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

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

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

.item{
  flex-shrink: 1（默认值） | <number>
}
.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。

.container{
  display: flex;
  width: 400px; // 容器宽度为400px
}

在这个例子中，项目溢出 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
其中计算时候值如果为小数，则向下取整。