flexbox布局

弹性布局盒

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; --- 在上方建立新的一行