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
}