微信小程序项目属性

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;

}

 flex-grow属性

当项目在主轴方向上还有剩余空间时，通过设置项目扩张因子进行剩余空间的分配。属性值为项目的扩张因子，属性值取非负数。

.item{

  flex-grow: 0（默认值） | <number>

}

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

.item{

  flex-basis: auto（默认值） | <number>px

}