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爲橫向（默認值）

二、彈性佈局盒 -- 改變內容順序

第一種：flex-direction：row-reverse；

第二種：flex-order   徹底設置項順序   eg：flex-order：1；

 

三、彈性佈局盒 -- 右盒內對齊

 justify-content屬性：

根據flex-direction值設置，當橫向從左到右，則默認值是flex-start，項從左到右，空白留在右側

flex-end，從右側開始排列，空白留在左側

center：項居中，空白留在全部項的兩側

space-between：項之間的間距是一致的，但第一個與最後一個之間是不留間距的

space-around：每一項兩側都具備相同的間距

上下交軸對齊：

align-items屬性：

屬性值有stretch（在沒有設置項的高度時候才適合用） 、 flex-start 、 flex-end、 center 、 baseline（項沿着第一行內容的基線對齊）

控制項的對齊能夠使用align-self屬性

 

四、彈性佈局盒 -- 增長彈性

 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 }

 

五、彈性佈局盒 -- 將一行進行拆分

flex-wrap：nowrap(一行)  /   wrap(拆分);

flex-flow:column wrap-reverse;   --- 在上方創建新的一行