本文已参与「新人创作礼」活动，一起开启掘金创作之路。
flex项目的属性
1. order
order决定了flex items的排布顺序
- 可以设置任意整数（正整数、负整数、0），值越小就越排在前面
- 默认值是0。
2. align-self
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
定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 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的flex-grow总和不超过1，每个flex item扩展的size为
- flex container的剩余size*flex-grow 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*收缩l比例/所有flex items的收缩l比例之和 ■ 如果所有flex items的flex-shrink总和sum不超过1，每个flex item收缩的size为
- flex items超出flex container的sizesum收缩l比例/所有flex items的收缩l比例之和
- 收缩t比例=flex-shrink*flex item的base size
- base size就是flex item放入flex container之前的size ■ 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
■ 双值语法：第一个值必须为一个无单位数，并且它会被当作的值。
- 第二个值必须为以下之一： 一个无单位数：它会被当作的值。 一个有效的宽度值：它会被当作的值。 ■ 三值语法：
- 第一个值必须为一个无单位数，并且它会被当作的值。
- 第二个值必须为一个无单位数，并且它会被当作的值。
- 第三个值必须为一个有效的宽度值，并且它会被当作的值。
最后推荐大家读一读阮一峰老师讲的flex www.ruanyifeng.com/blog/2015/0…
