如何使用CSS Flexbox實現2:5:3比例的自適應高度佈局？

利用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示例：

 


  <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>


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

這段代碼創建了一個高度自適應、比例為2:5:3的佈局。父容器高度設置為100vh ，使其占滿視口高度，您可以根據實際需求調整。

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