彈性盒子flex：
對于客戶端的布局非常有用，不管是平均分配space-around這個屬性還是兩端對齊space-betwee在頁面布局的時候都會有很好的表現，
對于部分內容區域中，具有很多大致內容相同的幾個區塊的布局都可以使用到它，將父級設定為display:flex；父級就會變成容器，子級就會變成專案，專案默認是在一行顯示，如果專案的寬度總和大于父級的總和了，子級就會縮放在一行顯示，
因此換行是需要自己設定的，我平時劃分的區塊是比較細的，因此用到換行的情況是內容相似而且比較多的，
換行的書寫方式為：flex-wrap:wrap 默認值為nowrap，
當換行過后交叉軸就會變成多根，在一根交叉軸的對齊方式使用的是align-items，當使用了換行過后對應的交叉軸對齊方式屬性應當書寫為align-content，
在使用中遇到一個難以解決的問題，想做一個骰子五的樣式，但是中間那個區塊沒法下去，代碼如下：
html中代碼如下：
<div > <div ></div> <div ></div> <div ></div> <div ></div> <div ></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，轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/108262.html
標籤：Html/Css
上一篇：html-前端內容初識
下一篇：如何創建 CSS