利用css flexbox輕松構建2:5:3比例的自適應高度布局
本文介紹如何使用css彈性盒模型(Flexbox)創建一個容器，其內部三個子元素的高度比例精確為2:5:3，并能根據屏幕尺寸自動調整，始終保持比例和填充父容器高度。
我們需要一個包含三個子元素的容器，這三個子元素的高度比例需保持2:5:3，且在各種屏幕分辨率下都能完美適配。Flexbox布局能夠輕松實現這一目標。
關鍵在于設置父容器的display: flex和flex-direction: column屬性，這使得子元素垂直排列。然后，使用flex屬性設置每個子元素占據空間的比例：flex: 2、flex: 5、flex: 3分別表示子元素占據父容器高度的2份、5份和3份。父容器高度會根據內容自動調整，確保子元素比例正確且自適應。為了垂直居中，我們使用了align-items: center。
以下代碼片段演示了實現方法：
立即學習“前端免費學習筆記（深入）”；
.container { display: flex; flex-direction: column; align-items: center; /* 垂直居中 */ height: 100vh; /* 占滿視口高度，可根據實際情況修改 */ } .item1 { flex: 2; } .item2 { flex: 5; } .item3 { flex: 3; }
為了更直觀地展示效果，我們提供一個完整的html示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox Layout</title> <style> .container { height: 100vh; width: 100px; background: #000; display: flex; flex-direction: column; align-items: center; } .item1 { flex: 2; background: pink; } .item2 { flex: 5; background-color: blue; } .item3 { flex: 3; background-color: cadetblue; } </style> </head> <body> <div class="container"> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> </div> </body> </html>
這段代碼創建了一個高度自適應、比例為2:5:3的布局。父容器高度設置為100vh，使其占滿視口高度，您可以根據實際需求調整。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
