如何使用 CSS Flexbox 實現圖片和文本的響應式佈局？

CSS Flexbox 響應式佈局：圖片與文本的完美結合

構建自適應網頁佈局，應對不同屏幕尺寸至關重要。本文將演示如何利用CSS Flexbox 實現一個常見的佈局需求：左側固定尺寸圖片，右側自適應文本內容。 在寬屏設備上，文本佔據剩餘空間；而在窄屏設備（例如手機）上，圖片則顯示在文本上方。

挑戰：實現屏幕尺寸自適應佈局

目標：使用Flexbox 佈局，左側顯示200x200 像素的圖片，右側顯示文本。大屏幕下，文本填充剩餘空間；小屏幕下，圖片位於文本上方。

之前的嘗試（例如ChatGPT 生成的代碼）可能存在問題：佈局僅進行等比例縮放，未能根據屏幕尺寸動態調整。

解決方案：巧妙運用視口元數據和媒體查詢

關鍵在於：添加視口元數據和媒體查詢。

首先，在HTML部分添加視口元數據：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

這行代碼告訴瀏覽器，頁面寬度應與設備寬度匹配，初始縮放比例為1.0，確保響應式效果。

其次，調整CSS 代碼，利用媒體查詢控制不同屏幕尺寸下的佈局：

 .container {
  display: flex;
}

.image {
  width: 200px;
  height: 200px;
}

.text {
  flex: 1; /* 佔據剩餘空間*/
}

@media (max-width: 600px) { /* 針對小屏幕設備*/
  .container {
    flex-direction: column; /* 佈局改為垂直方向*/
  }
  .text {
    flex: initial; /* 取消flex 屬性，使文本寬度自適應*/
  }
}

HTML 結構示例：

<div class="container">
  <div class="image">圖片</div>
  <div class="text">文本內容</div>
</div>

通過以上調整，佈局將根據屏幕寬度動態變化。大屏幕下，圖片和文本水平排列；小屏幕下，圖片位於文本上方，完美適配不同設備。

以上是如何使用 CSS Flexbox 實現圖片和文本的響應式佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！