持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第19天，点击查看活动详情
flex-item属性
1.order
order 决定了flex items 的排布顺序
可以设置任意整数(正整数、负整数、0)，值越小就越排在前面
默认值是0
2.flex items
flex items可以通过align-self 覆盖flex container设置的align-items
auto(默认值)︰遵从flex container的align-items设置
stretch、flex-start、 flex-end、center、baseline，效果跟align-items一致
3.flex-grow
flex-grow决定了flex items如何扩展(拉伸/成长)
可以设置任意非负数字（正小数、正整数、0)，默认值是0
当flex container在main axis方向上有剩余size时，flex-grow属性才会有效
如果所有flex items的flex-grow总和sum超过1，每个flex item扩展的size为
flex container的剩余size * flex-grow / sum
flex items扩展后的最终size 不能超过max-width\max-height
4.flex-shrink
flex-shrink决定了flex items如何收缩(缩小)
可以设置任意非负数字（正小数、正整数、0)，默认值是1
当flex items在main axis方向上超过了flex container的 size，flex-shrink属性才会有效
如果所有flex items的flex-shrink总和超过1，每个flex item 收缩的size为
flex items超出flex container的 size *收缩比例/所有flex items 的收缩比例之和
flex items收缩后的最终size不能小于min-width\min-height
5.flex-basis
flex-basis 用来设置flex items在main axis 方向上的base size
auto(默认值)、具体的宽度数值（100px)
决定flex items最终base size的因素，从优先级高到低
max-width\max-height\min-width\min-height
flex-basis
width\height
内容本身的size
6.flex属性
flex是flex-grow || flex-shrink || flex-basis的简写,flex属性可以指定1个，2个或3个值。
单值语法:值必须为以下其中之一:
一个无单位数():它会被当作的值。
一个有效的宽度(width)值:它会被当作的值。
关键字none，auto或initial.
双值语法:第一个值必须为一个无单位数，并且它会被当作的值。
第二个值必须为以下之一:
一个无单位数:它会被当作的值。
一个有效的宽度值:它会被当作的值。
三值语法:
第一个值必须为一个无单位数，并且它会被当作的值。
第二个值必须为一个无单位数，并且它会被当作的值。
第三个值必须为一个有效的宽度值，并且它会被当作的值。
