彈性盒子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。