微信小程序（Flex布局-项目属性）

项目属性集合
order、flex-grow、flex-shrink、flex-basis、flex、align-self
设置容器内项目相关样式，用于设置项目的尺寸、位置，以及对项目的对齐方式做特殊设置。
项目属性：
①沿主轴方向上的排列顺序order: 0（默认值） | <integer整数>
②项目的收缩因子flex-shrink: 1（默认值） |
③项目的扩张因子flex-grow: 0（默认值） |
④项目width属性替代品flex-basis: auto（默认值） | px
⑤flex-grow、flex-shrink、flex-basis的简写方式：flex 属性
⑥项目在行中交叉轴方向上的对齐方式align-self: auto（默认值） | flex-start | center | flex-end | baseline |stretch
order属性

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

<view class="order">
  <view>项目1</view>
  <view>项目2</view>
  <view>项目3</view>
  <view>项目4</view>
</view>

.order{
  width: 100%;
  height: 400rpx;
  background: pink;
  display: flex;
  justify-content: space-around;
}
.order view{
  width: 20%;
  height: 200rpx;
  background: gold;
}
.order view:nth-of-type(1){
  order: -6
}
.order view:nth-of-type(2){
  order: 2
}
.order view:nth-of-type(3){
  order: -1
}
.order view:nth-of-type(4){
  order: 6
}

flex-shrink属性

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

<view class="shrink">
  <view>1</view>
  <view>2</view>
  <view>3</view>
</view>

.shrink{
  width: 400px;
  height: 200px;
  background: rgba(0, 0,0,.3);
  display: flex;
  flex-direction: row;
}
.shrink view:nth-of-type(1){
  width: 120px;
  background: plum;
  flex-shrink: 2;

}
.shrink view:nth-of-type(2){
  width: 150px;
  background:paleturquoise;
  flex-grow: 0;
  
}
.shrink view:nth-of-type(3){
  width: 180px;
  background:peachpuff;
  flex-shrink: 3;
  
}

当项目压缩因子相加小于1时，参与计算的溢出空间不等于完整溢出空间

flex-shrink属性案例：
一个宽度为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除以总权重：
lex-shrink属性案例：
①item1的最终宽度为：120 - 50 * 120 * 2 / 870 ≈ 106px
②item2的最终宽度为：150 - 50 * 150 * 3 / 870 ≈ 124px
③item3的最终宽度为：180 - 50 * 180 * 1 / 870 ≈ 169px

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的优先级更高。

flex 属性
本质：
flex-grow，flex-shrink，flex-basis的简写方式。
值设置为none，等价于00 auto。值设置为auto，等价于1 1 auto。
align-self属性
设置项目在行中交叉轴方向上的对齐方式，用于覆盖容器的align-items，可以对项目的对齐方式做特殊处理。
默认属性值为auto，继承容器的align-items值，当容器没有设置align-items时，属性值为stretch。

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

<view class="box6">
  <view class="box4Child5"></view>
  <view class="box4Child6"></view>
  <view class="box4Child7"></view>
</view>

.box6{
  width: 260rpx;
  height: 260rpx;
  background: #000;
  display: flex;
}
.box4Child5,.box4Child6,.box4Child7{
  width: 80rpx;
  height: 80rpx;
  background: #fff;
  border-radius: 50%;
}
.box4Child6{
  display: flex;
  align-self:center;
}
.box4Child7{
  display: flex;
  align-self:flex-end;
}