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