弹性布局盒
E{
display:flex;
}
当设置以上属性之后
1 <div> 2 <div id=“”> </div> 3 <div id=“”> </div> 4 </div>
以上布局即使没有设置浮动或者定位也会并排显示
1 E{
2 display:flex;
3 flex-direction：column；
4 }
5 column为纵向 ，row为横向（默认值）
2、弹性布局盒 -- 改变内容顺序
第一种：flex-direction：row-reverse；
第二种：flex-order 完全设置项顺序 eg：flex-order：1；
3、弹性布局盒 -- 右盒内对齐
justify-content属性：
根据flex-direction值设置，当横向从左到右，则默认值是flex-start，项从左到右，空白留在右侧
flex-end，从右侧开始排列，空白留在左侧
center：项居中，空白留在所有项的两侧
space-between：项之间的间距是一致的，但第一个与最后一个之间是不留间距的
space-around：每一项两侧都具有相同的间距
上下交轴对齐：
align-items属性：
属性值有stretch（在没有设置项的高度时候才适合用） 、 flex-start 、 flex-end、 center 、 baseline（项沿着第一行内容的基线对齐）
控制项的对齐可以使用align-self属性
4、弹性布局盒 -- 增加弹性
1 E{
2 flex ： 1 2 150px；
3 }
4
5 ==
6
7 E{
8 flex-grow：1； --- 剩余的宽度被分配为1：1:1三等分
9 flex-shrink：2； -- 超出后，回减的比例
10 flex-basis：150px； --- 宽度是可以伸缩的，伸缩基准是150px
11 }
5、弹性布局盒 -- 将一行进行拆分
flex-wrap：nowrap(一行) / wrap(拆分);
flex-flow:column wrap-reverse; --- 在上方建立新的一行