伸縮佈局複合屬性
阿新 • • 發佈：2020-07-31
複合屬性 flex，是 flex-grow、flex-shrink 和 flex-basis 的簡寫屬性，用來指定 flex 子項如何分配空間。
例 子
三個子盒子在父盒子中的寬度比例為 1：2：3
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> html{ font-size: 10px程式碼; } body{ font-size: 1.6rem; } #box1{ width: 80%; height: 20rem; background-color: aqua; /*伸縮佈局*/ display: flex; } .item{ height: 5rem; background-color: pink; margin: 5px; } </style> </head> <body> <div id="box1"> <div class="item" style="flex: 1;">item1</div> <div class="item" style="flex: 2;">item2</div> <div class="item" style="flex: 3;">item3</div> </div> </body> </html>
因為父盒子寬度為 80%，所以改變瀏覽器視窗大小之後，子盒子寬度改變但是寬度比例仍為 1：2：3，隨著瀏覽器視窗大小改變子盒子寬度響應式地改變。