如何使用CSS Flexbox實現2:5:3比例的自定義高度佈局並適配不同分辨率？

CSS Flexbox實現自適應高度比例佈局

本文介紹如何利用CSS Flexbox創建一個高度比例為2:5:3的佈局，並使其在不同分辨率下保持一致。這種佈局在網頁設計中非常實用，可以靈活地分配頁面內容區塊的高度。

核心技術是CSS的Flexbox彈性盒模型。通過設置父容器的display: flex屬性和子元素的flex屬性，可以輕鬆控制子元素的高度比例。

首先，設置父容器樣式，使其成為Flex容器：

 .container {
  display: flex;
  flex-direction: column; /* 垂直排列子元素*/
  height: 100vh; /* 佔據視口高度*/
  align-items: stretch; /* 子元素撐滿父容器寬度*/
}

flex-direction: column;確保子元素垂直排列； height: 100vh;使父容器高度自適應視口高度； align-items: stretch;確保子元素寬度充滿父容器。

然後，設置子元素的flex屬性來定義高度比例：

 .box1 { flex: 2; }
.box2 { flex: 5; }
.box3 { flex: 3; }

flex: 2; , flex: 5; , flex: 3;分別定義了三個子元素的高度比例為2:5:3。 Flexbox會根據此比例自動分配可用空間。

以下是一個完整的HTML示例：

 


  <title>Flexbox Height Ratio</title>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
      align-items: stretch;
    }
    .box1 { flex: 2; background-color: lightpink; }
    .box2 { flex: 5; background-color: lightblue; }
    .box3 { flex: 3; background-color: lightgreen; }
  </style>


  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>

通過這種方法，無論瀏覽器窗口大小如何變化，三個子元素的高度比例始終保持2:5:3，實現了完美的自適應佈局。

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