標籤：標準 htm 佔用 情況 小結 col wrap splay display
1、彈性盒布局對齊模式1.1、彈性盒子在規定彈性盒子之中的子級元素換行顯示之前父級元素必須是彈性盒子模型，也就是設定 display 為 flex
代碼如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>彈性盒布局</title> <style type="text/css"> .div1{ width: 800px; height: 410px; display: flex;/*設定為彈性盒模型*/ border: 1px solid red; margin: 0 auto; } .div1 a{ text-decoration: none; display: inline-block; flex: auto; /*子項目平均分配父級元素寬度與高度*/ margin: 5px; background-color: #757575; } </style> </head> <body> <div class="div1"> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> </div> </body></html>
結果：
1.2、彈性盒子換行顯示flex-wrap：wrap ； 彈性容器為多行。該情況下彈性子項溢出的部分會被放置到新行，子項內部會發生斷行。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>彈性盒布局</title> <style type="text/css"> .div1{ width: 800px; height: 410px; display: flex;/*設定為彈性盒模型*/ flex-wrap: wrap; /*規定彈性盒子的內容換行顯示*/ border: 1px solid red; margin: 0 auto; } .div1 a{ text-decoration: none; display: inline-block; width: 150px; height: 200px; border: 1px solid red; background-color: #757575; } </style> </head> <body> <div class="div1"> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> </div> </body></html>
結果：
從上面的結果來看雖然子項目換行顯示了但是布局效果並不是很好，好的別著急我們接著往下看
1.3、彈性盒子左右對齊CSS 文法：justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;屬性值：
flex-start預設值。項目位於容器的開頭。
flex-end項目位於容器的結尾。
center 項目位於容器的中心。
space-between項目位於各行之間留有空白的容器內。
space-around項目位於各行之前、之間、之後都留有空白的容器內。
initial 設定該屬性為它的預設值。
inherit 從父元素繼承該屬性。
justify-content 的屬性值有很多，本次為大家介紹的是 space-between 也是在我們布局中比較好用的一中布局方式，缺點就是相容性不是很理想
廢話就不多說了，給大家試試效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>彈性盒布局</title> <style type="text/css"> .div1{ width: 800px; height: 410px; display: flex;/*設定為彈性盒模型*/ flex-wrap: wrap; /*規定彈性盒子的內容換行顯示*/ justify-content: space-between; /*規定彈性盒子左右對齊*/ border: 1px solid red; margin: 0 auto; } .div1 a{ text-decoration: none; display: inline-block; width: 150px; height: 200px; background-color: #757575; } </style> </head> <body> <div class="div1"> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> </div> </body></html>
結果：
雖然效果已經很不錯了，但是細心的童鞋不難發現我們的子項目並沒有與父元素的底部平齊
1.4、彈性盒子交叉軸對齊CSS 文法 align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
stretch 預設值。元素被展開以適應容器。各行將會伸展以佔用剩餘的空間。如果剩餘的空間是負數，該值等效於‘flex-start‘。在其它情況下 ，剩餘空間被所有行平分，以擴大它們的側軸尺寸。
center 元素位於容器的中心。各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時在彈性盒容器中置中對齊，保持彈性盒容器的側軸起始內 容邊界和第一行之間的距離與該容器的側軸結束內容邊界與第最後一行之間的距離相等。（如果剩下的空間是負數，則各行會向兩個方向 溢出的相等距離。）
flex-start 元素位於容器的開頭。各行向彈性盒容器的起始位置堆疊。彈性盒容器中第一行的側軸起始邊界緊靠住該彈性盒容器的側軸起始邊界，之 後的每一行都緊靠住前面一行。
flex-end 元素位於容器的結尾。各行向彈性盒容器的結束位置堆疊。彈性盒容器中最後一行的側軸起結束界緊靠住該彈性盒容器的側軸結束邊界， 之後的每一行都緊靠住前面一行。
space-between 元素位於各行之間留有空白的容器內。各行在彈性盒容器中平均分布。如果剩餘的空間是負數或彈性盒容器中只有一行，該值等效 於‘flex-start‘。在其它情況下，第一行的側軸起始邊界緊靠住彈性盒容器的側軸起始內容邊界，最後一行的側軸結束邊界緊靠住彈 性盒容器的側軸結束內容邊界，剩餘的行則按一定方式在彈性盒視窗中排列，以保持兩兩之間的空間相等。
space-around 元素位於各行之前、之間、之後都留有空白的容器內。各行在彈性盒容器中平均分布，兩端保留子項目與子項目之間間距大小的一半。 如果剩餘的空間是負數或彈性盒容器中只有一行，該值等效於‘center‘。在其它情況下，各行會按一定方式在彈性盒容器中排列，以 保持兩兩之間的空間相等，同時第一行前面及最後一行後面的空間是其他空間的一半。
屬性值有很多，本次介紹一下 space-between
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>彈性盒布局</title> <style type="text/css"> .div1{ width: 800px; height: 410px; display: flex;/*設定為彈性盒模型*/ flex-wrap: wrap; /*規定彈性盒子的內容換行顯示*/ justify-content: space-between; /*規定彈性盒子左右對齊*/ align-content: space-between; /*當彈性盒內容為多行顯示是 規定交叉軸對齊*/ border: 1px solid red; margin: 0 auto; } .div1 a{ text-decoration: none; display: inline-block; width: 150px; height: 200px; background-color: #757575; } </style> </head> <body> <div class="div1"> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> <a href="##"></a> </div> </body></html>
結果：
非常快速的就完成了一個非常完美的布局了，是不是呢。
小結：這樣的布局方式不會脫離標準文檔流，所以就不會有需要清除浮動的問題
CSS3與彈性盒布局
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
