彈性盒子flex： 對於客戶端的佈局非常有用，不管是平均分配space-around這個屬性還是兩端對齊space-betwee在頁面佈局的時候都會有很好的表現。 對於部分內容區域中，具有很多大致內容相同的幾個區塊的佈局都可以使用到它，將父級設置為display:flex；父級就會變成容器，子級就會 ...
彈性盒子flex：
對於客戶端的佈局非常有用，不管是平均分配space-around這個屬性還是兩端對齊space-betwee在頁面佈局的時候都會有很好的表現。
對於部分內容區域中，具有很多大致內容相同的幾個區塊的佈局都可以使用到它，將父級設置為display:flex；父級就會變成容器，子級就會變成項目，項目預設是在一行顯示，如果項目的寬度總和大於父級的總和了，子級就會縮放在一行顯示。
因此換行是需要自己設置的。我平時劃分的區塊是比較細的，因此用到換行的情況是內容相似而且比較多的。
換行的書寫方式為：flex-wrap:wrap 預設值為nowrap。
當換行過後交叉軸就會變成多根，在一根交叉軸的對齊方式使用的是align-items，當使用了換行過後對應的交叉軸對齊方式屬性應當書寫為align-content。
在使用中遇到一個難以解決的問題，想做一個骰子五的樣式，但是中間那個區塊沒法下去，代碼如下：
html中代碼如下：
<div class="father"> <div class="first"></div> <div class="second"></div> <div class="third"></div> <div class="fourth"></div> <div class="fifth"></div> </div> css中代碼如下： .father { height: 320px; width: 320px; margin: 0 auto; display: flex; box-sizing: border-box; border: solid 1px red; justify-content: space-between; flex-wrap: wrap; align-content: space-between; } 每個盒子我給了一個背景顏色，因為代碼都是重覆的就不寫了。 .father>div { width: 100px; height: 100px; } .second { align-self: center !important; } 此問題我無法解決，但是因為平時的開發中也用不到這樣的佈局因此也沒有特別去糾結。 對於屬性flex-direction，可以改變主軸的對齊方式，可以從左到右，從右到左，也可以從上到下，從下到上。根據自己的需求也是挺好用的。 flex-direction與flex-wrap可以簡寫為flex-flow：既可以設置換行也可以設置主軸的對齊方式，可以寫單個值也可以兩個值一起寫。 綜上所述在之前的開發當中因為float浮動的使用非常麻煩因為每次設置了浮動過後都要清浮動，否則的話浮動元素不會計入常規流的計算，那麼在下方的常規流內容區塊就會往上頂，所以就非常的麻煩，因此flex的佈局就體現出了非常方便的優點，比如我想讓內容去正中間只需要兩條語句即可，也不需要一點一點的調margin。
