align-items属性是设置在上下文或容器上面的，也可以针对某一个特定的子元素给它设置一个不同的样式。比如容器的align-items的值是flex-start，但是可以给其中某一个元素设置成flex-end对齐方式，这是align-self给某个元素设置特殊的对齐。
设置order，比如是从左到右的流向，order是1、2、3的顺序，也可以设置成负数或者其它值，从小到大按order排序就可以。这样也可以通过CSS去控制也页面摆放的顺序。
宽度计算：
可以把flex上下文里所有的子元素理解为有弹性的元素，可以被压缩和拉伸。通过flex相关的flex-grow（有剩余空间时的伸展力）、flex-shrink（容器空间不足时收缩的能力）、flex-basis（没有伸展或收缩时的基础长度）去设置伸展和收缩的能力。
.container {
display: flex;
}
.a,.b,.c {
width: 100px;
}
.a {
flex-grow: 2;
}
.b {
flex-grow: 1;
}
例子中，a，b，c原本的宽度都是100像素，但是给a设置了flex-grow是2，给b的flex-grow设置1，这就意味着让a元素像弹簧一样有向外的弹力，并且弹力相对b较大，c没有向外扩张的能力，所以造成的效果，有一个一定宽度的容器，减去三个元素既不伸展和压缩时的宽度，把剩余的空间按照2:1的比例分配到a、b元素上。注意flex-grow的值不是指a元素实际占用2份空间，即a元素并不是b元素宽度的2倍，而是说容器把原本的宽度抛去之后，将剩余的空间按比例分布到元素上。子元素也可以被压缩，当容器空间不足时，比如最初a、b、c元素的宽度都是400px，现在的容器宽度不足1200px，压缩的规则是一样的，通过flex-shrink指定某个元素能被压缩。
