弹性盒布局

弹性盒布局 ,属于css3部分，ie9以下不支持，现代浏览器指的是就是ie9及以上

主要出现属性：display：flex

块元素与行元素的转换
display:none;--------让元素消失，不占据空间位置
display:block;--------让元素呈现块元素特点
display:inlink;--------让元素呈现行元素特点
display:inlink-block;------让元素呈现行跟块的特点

弹性盒布局
在父项可设置属性：
display:flex;---------一定要设置的，是核心属性。如果要用弹性盒布局就要用。

flex-direction---定义弹性盒子项的排列方向
flex-direction:row--------水平
flex-direction:column-----竖直

flex-wrap:wrap;------让子项换行

justify-content:center;---------在cross轴的中心（一般为竖直方向）
flex-end;-------在cross轴的底部
flex-strat;-------在cross轴的顶部
space-between;---围绕着cross轴向两边分开，所有空白在子项之间。
space-around;-----围绕着cross轴向两边分开，所有空白平均分给子项，空白围绕着子项。

当设置了换行才生效。
align-items:center;--------在main轴的中心
flex-end;-------在main轴的底部
flex-strat;-------在main轴的顶部

flex-direction: column;----改变轴的方向

设置在子项：
flex:1---将空白的分配到子项，数值表示占据剩余空间的份数，这是简写
flex-grow:0;-----子项分配父级剩余空间的比
flex-shrink:1;-----子项的收缩所占的份数【当所有子项相加的宽度大于父项的宽度，每个子项减少的多出宽度[]的1/n】
flex-basis:auto;-----子项宽度，也可以用百分比表示。

order:0;---------可以改变子项的顺序，可以设置成负值，值越小越靠前，默认为0

align-self:center;--------子项在main轴的中心
flex-end;-------在main轴的底部
flex-strat;-------在main轴的顶部