如何用CSS Flexbox實現高度比例為2:5:3的響應式佈局？

使用CSS Flexbox創建高度比例為2:5:3的響應式佈局

本文介紹如何利用CSS Flexbox實現一個高度比例始終保持2:5:3的響應式佈局，並適應不同屏幕尺寸。 關鍵在於巧妙運用Flexbox的特性。

首先，我們將父容器設置為Flex佈局，並指定display: flex; flex-direction: column; 。 這使得子元素沿垂直軸線依次排列。

接下來，利用flex屬性控制子元素的高度比例。 flex: 2; , flex: 5; , flex: 3;分別指定三個子元素佔據父容器高度的比例為2:5:3。 父容器高度會根據內容自適應，子元素高度則按比例分配。 這種方法確保了在各種屏幕尺寸下，高度比例都能保持一致。

為了讓佈局充滿整個視口高度，我們設置父容器高度為視口高度的100%： height height: 100vh; 。

以下提供CSS和HTML代碼示例：

CSS代碼：

 .container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  align-items: center; /* 可選：垂直居中*/
}

.item1 {
  flex: 2;
}

.item2 {
  flex: 5;
}

.item3 {
  flex: 3;
}

HTML代碼：

 


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Layout</title>
  <style>
    /* CSS 代码同上 */
  </style>


  <div class="container">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
  </div>

通過以上代碼，即可創建一個高度比例為2:5:3，並且在不同屏幕尺寸下都能保持正確比例的響應式佈局。 align-items: center;是可選屬性，用於垂直居中子元素，可根據實際需求添加或刪除。

以上是如何用CSS Flexbox實現高度比例為2:5:3的響應式佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！