Flex布局-项目属性

项目属性：
设置容器内项目相关样式，用于设置项目的尺寸、位置，以及对项目的对齐方式做特殊设置。

一、沿主轴方向上的排列顺序 order: 0（默认值） | <integer整数>

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

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

.demo{
  width: 100%;
  height: 300rpx;
  background: #eee;
  margin-top: 50rpx;
  display: flex;
  justify-content: space-around;
}
.demo view{
  width: 20%;
  height: 200rpx;
  background: paleturquoise;
}
.demo view:nth-of-type(1){
  order:2;
}
.demo view:nth-of-type(2){
  order:-1;
}
.demo view:nth-of-type(3){
  order:1;
}

二、项目的收缩因子flex-shrink: 1（默认值） | <number>

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

flex-shrink属性案例一：项目压缩因子相加大于1时
一个宽度为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除以总权重。

.demo{
  width: 400px;
  height: 200px;
  background: #eee;
  margin-top: 50rpx;
  display: flex;
  justify-content: sp