CSS-flex布局（二）

此篇CSS-flex布局（一）记录了容器属性，本篇记录一下项目属性的学习过程，偷个懒，不放图了

项目属性

未设置任何容器属性

order

设置项目的排列顺序，数字小的排在前面，可为负值
order:0 默认值

flex:(flex-grow) (flex-shrink) (flex-basis)

flex:auto (1 1 auto) / none (0 0 auto) 快捷值

flex-grow:0 默认值，容器有剩余空间，也不放大
设置项目的放大情况，容器空间有剩余时生效
如果只有1个项目设置了flex不为0，设置为1的项目会占满所有剩余空间
项目宽度=项目设置宽度 + flex-grow值 ×（容器剩余宽度/所有项目总flex-grow值）

flex-shrink:1 默认值，空间不足，该项目将缩小
设置项目缩小情况
项目宽度=项目设置宽度 - （项目总宽度 - 容器宽度）× flex-shrink值 ÷ 总flex-shrink值
如果项目内的元素宽度大于缩小后的项目宽度，那么项目会被撑开，需要根据情况设置项目的overflow属性

flex-basis: auto 默认值，项目本身大小