flex盒模型整理
阿新 • • 發佈：2020-12-13
1.彈性盒子真神奇，專案寬度（指x軸為主軸時的寬度，是y軸為主軸時的高度）大於父盒子也溢不出
x軸為主軸時
瞭解：y軸為主軸時（y軸為主軸可以看成x軸為主軸的旋轉）
寬度（指x軸為主軸時的寬度，y軸為主軸時的高度）大於父盒不溢位，取父盒寬度：因為專案的flex-shrink預設值為1，所以當專案寬度大於父盒子寬度時，所有專案寬度會等比例（1:1:1）縮小,總寬度等於父盒子寬度； 當然如果某個專案的為0或為2，那麼就不縮小以及承擔兩份比例的縮小。總之就是flex-shrink為0的專案不承擔縮小，flex-shrink為及就承擔相對比例的縮小。 <style> .father { display: flex; width: 100px; background-color: blue; } .son1 { height: 50px; width: 50px; background-color: pink; } .son2 { flex-shrink: 0; /* 不承擔縮小 */ height: 50px; width: 50px; background-color: yellow; } .son3 { flex-shrink: 2; /* 承擔兩份縮小 */ height: 50px; width: 50px; background-color: green; } </style> </head> <body> <div class='father'> <span class="son1 all"></span> <span class="son2 all"></span> <span class="son3 all"></span> </div> </body>
2.父盒子的高度未指定時，專案高度不會溢位；父盒子指定高度後，專案高度大於父盒子高度就會溢位。
- 父盒子未指定高度時（按照高度最大的子專案高度來撐開父盒子）補充：父盒子未指定寬度時，寬度按照100%來、即獨佔一行。
<style> .father { display: flex; background-color: blue; } .son1 { height: 50px; width: 50px; background-color: pink; } .son2 { height: 50px; width: 50px; background-color: yellow; } .son3 { height: 100px; width: 50px; background-color: green; } </style> </head> <body> <div class='father'> <span class="son1 all"></span> <span class="son2 all"></span> <span class="son3 all"></span> </div> </body>
- 當父盒子指定高度時，若子專案高度大於父盒子，則子專案溢位
<style> .father { display: flex; height: 50px; width: 150px; background-color: blue; } .son1 { height: 50px; width: 50px; background-color: pink; } .son2 { height: 50px; width: 50px; background-color: yellow; } .son3 { height: 100px; width: 50px; background-color: green; } </style> </head> <body> <div class='father'> <span class="son1 all"></span> <span class="son2 all"></span> <span class="son3 all"></span> </div> </body>