對於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。