使用css flexbox構建不同分辨率下高度比例為2:5:3的自適應布局
本文將演示如何在PC端利用CSS Flexbox創建高度自適應的布局，其子元素高度比例始終保持2:5:3，并完美兼容各種屏幕分辨率。 這只需簡單的Flexbox屬性即可實現。
我們的目標是將一個容器分成三個子元素，并按2:5:3的比例分配高度。 無論容器高度如何變化，子元素的高度比例都應保持不變。
解決方案的關鍵在于Flexbox布局的flex屬性。 通過設置父元素的display: flex和flex-direction: column，我們將父元素的主軸方向設置為垂直方向，使子元素垂直排列。
立即學習“前端免費學習筆記（深入）”；
接下來，為每個子元素設置flex屬性：flex: 2、flex: 5和flex: 3分別表示這三個子元素占據可用空間的比例為2、5和3。 這樣，無論父容器高度如何，它們的高度比例始終保持2:5:3。 為了垂直居中，我們使用了align-items: center。
以下為CSS和html代碼示例：
.container { display: flex; flex-direction: column; align-items: center; height: 100vh; /* 占據視窗高度 */ } .item1 { flex: 2; background-color: pink; } .item2 { flex: 5; background-color: blue; } .item3 { flex: 3; background-color: cadetblue; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox Layout</title> <style> /* CSS代碼同上 */ </style> </head> <body> <div class="container"> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> </div> </body> </html>
這段代碼創建了一個高度自適應的布局，子元素高度比例始終為2:5:3。 請注意，父元素container必須設置height: 100vh;或其他方式確保其占據足夠的高度，才能使子元素按照比例分配高度。
通過以上方法，您可以輕松實現高度自適應且比例固定的Flexbox布局。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
