css3.flex项目属性

flex-box项目属性

order || flex-grow || flex-shrink || flex-basis

order（秩序）在不改变html结构的情况下进行项目排序，默认情况下是0，从低到高排序，数值越大越靠后。

li:nth-child(1){order: 1;}

li:nth-child(1){order: 1;}li:nth-child(3){order: 2;}

如果值相同，那么按照html结构顺序排列先后。结果与上图一样。

li:nth-child(1){order: 1;}li:nth-child(3){order: 1;}

flex-grow（成长）值为0或者正数，默认为0； flex-shrink（缩小）默认为1；0是关闭

li{list-style: none;width: 200px;height: 200px;background: #ddd;font-size:50px;margin: 10px;flex-grow: 0;}

如果将值改为1，就是打开了这个属性，自动撑满父级，并且会随着浏览器缩放而缩放，因为flex-shrink（缩小）默认为1是打开状态；0是关闭；

flex-basis（设置宽度）我觉得它就是设置宽度值的属性，可以使用width的各种单位%，em,rem,px,不过它必须要带单位比如0px,而不能写成0，

flex是这三种属性的简写flex-grow、flex-shrink和flex-basis。