flex的布局：
子元素的6个样式属性：
1.order : //说明：设置子元素的排列顺序，数值越小，排列越靠前，默认0;
取值：order :<integer>//取整数；order :2,1-1,等等
2.flex-grow: //设置子元素，在剩余空间的伸展分配状况，
取值：默认值为0 ，//表示如果存在空间，也不放大;
取值：flex-grow: <number>;
注：如果所有的子元素的flex-grow属性都为1，则他们等分剩余的空间，
如果一个项目的flex-grow,属性为2，其他项目为1，则前者占据的剩余空间将比其他项多一倍；
3.flex-shrink : //说明：设置子元素，在空间不足时的缩小分配状况；
取值：默认值为 1，//表示如果空间不足时，都将等比例缩小；
取值：flex-shrink: 0 ,1等等
注：如果一个子元素的flex-shrink属性为0，其他子元素为1，当空间不足时，前者为0的不缩小；
负值对该属性无效；
4.flex-basis : //说明：定义子元素在在分配多余空间之前，子元素占据的主轴的空间；
取值：默认值auto,//表示项目的本来的大小；
取值：<length> | auto; /* default auto */；
5.flex : //说明：是对flex-grow flex-shrink , flex-basis 一起的简写；
取值： 默认值 不放大 等比例缩小 子元素本身大小
取值：默认值 0 1 auto;
注：该属性有两个快捷值 auto 和 none
auto 代表 1 1 auto；
none 代表 0 0 auto；
建议优先使用这个快捷值，因单独写三个分离值，浏览器会去进行推算；
6.align-self : //说明：设置子元素，与其他子元素有不一样的的对齐方式；可以覆盖其父容器的align-items属性，
默认值为auto,表示继承父容器的align-items属性；如没有父容器的align-items的设置，则相当于stretch；
取值：align-self: 继承父容器的设置的对齐方式 | 子元素上对齐 | 子元素垂直下对齐 | 子元素垂直居中 |子元素基线对齐 | 子元素垂直填满父容器;
取值：align-self: auto | flex-start | flex-end | center | baseline | stretch;