那么分别来看看每个属性的取值和实现效果（）
order
利用这个属性可以解决某个区块优先加载但是在页面上的显示较靠后的问题。
CSS Code复制内容到剪贴板
div .item {order:<integer>}
/*数值越大，排列越靠后。默认为0*/
这里我设置了第一个子项的order为1。
flex-grow
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的空间将比其他项多一倍。
CSS Code复制内容到剪贴板
div .item {flex-grow:<number>}
设置flex-grow前：
设置后：
第二个项目的flex-grow为2，其他为0：
<注意这个时候就不需要给子项设置宽度了>
flex-shrink
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
CSS Code复制内容到剪贴板
div .item {flex-shrink:<number>}
我给每个子项设定了200px的宽度，而flex容器宽度为500px，这时候若不设置flex-shrink，则每个项目都会以相同比例缩小自身大小来适应容器。
此时我给第二个项目设置了flex-shrink: 0; 该项目大小不变。
flex-basis
这个属性设置子项在主轴上的跨度，简单地说就是设置宽高。
CSS Code复制内容到剪贴板
div .item {flex-basis:<length> | auto/*auto是默认值，就是项目本身大小*/}
flex
这个就是把flex-grow、flew-shrink、flex-basis结合一起的写法啦=。=
CSS Code复制内容到剪贴板
div .item {flex:none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]}
flex-grow必须。默认为0 1 auto。
align-self
这个属性用来单独设定某个子项目在侧轴的对齐方式。
CSS Code复制内容到剪贴板
div .item {align-self:flex-start|flex-end|center|baselinebaseline|stretch}
有关flex布局的方法就总结和介绍到这里了。
