css3弹性盒子

弹性盒子的效果：无非就是父级盒子里面很多个小盒子进行弹性，有规则的排列分布

使用：在父级定义css属性：display:flex 子元素可以定义宽高，也可以定义flex：1 分布比例：如何去分配父容器的空间

弹性盒子操作很多属性，但是纵观所有属性，无非就是分为两种，1.横向，纵向
flex-direction:定义是在主轴对齐，还是侧轴对齐

flex-wrap：定义子元素超出父容器的时候是否换行

justtify-content:其实就是操控父容器空余的空间，来达到操作子元素的位置效果 (在主轴方向上)

align-content:其实就是操控父容器空余的空间，来达到操作子元素的位置效果 (在测轴方向上)

align-items:此属性是写在父容器上面，就是设置父容器里面的子元素在侧轴上面的排列方式

align-self：此属性是写在子元素上面，就是单独设置子元素在父容器上侧轴方向上的对齐方式

order：数字 用整数来设置子元素的排列顺序，数值小排列在前面。

使用：

display: flex;
flex-direction: row|row-reverse|column|column-reverse;
flex-wrap: wrap|nowrap|wrap-reverse;
flex-flow: flex-direction flex-wrap;
justify-content: flex-start|flex-end|center|space-between|sapce-around;
align-items: flex-start|flex-end|center|baseline|stretch|auto(默认值);
align-content:flex-start|flex-end|center|space-between|space-around|stretch(默认值);

flex项目

order: 值为数值，默认值0，按数字从小到大排列。
align-self: flex-start|flex-end|center|baseline|stretch|auto(默认值);
flex: 默认值为0 1 auto;后面两个值是可以省略的。所有默认值也可以说是:0
flex-grow: 在父容器还有剩余空间时，怎么分配剩余空间，默认值为0
flex-shrink：在父容器的大小不够时，子元素缩小的比例，默认值为1
flex-basis: 设置元素分配父容器的空间的大小，标签原大小失效， 
            父容器剩余空间够的时候，标签大小值跟flex-basis的值一样
            父容器剩余空间不够的时候，也会伸缩
            默认为auto,就是标签的大小