掌握靈活的佈局：響應式設計的 CSS Flexbox VS Grid

這篇文章探討了使用 CSS Flexbox 和 Grid 建立響應式、水平分佈的卡片清單的各種方法。 我們將解決在不同螢幕尺寸上保持一致的卡片尺寸和間距的挑戰。

目錄

• 目錄
• 挑戰
• CSS Flexbox：靈活的卡片清單
• 與 flex-grow 和 flex-basis
均勻發卡
• CSS 網格：響應式解
• 總結

挑戰

圖庫或清單元件通常需要卡片（文章、產品、圖像）來適應容器的寬度。 每張卡片應按比例調整大小，保持相同的高度、寬度和間距。 佈局應在各種螢幕尺寸上無縫重排。

基本的 HTML 結構和最少的 CSS 最初可能會產生不均勻的卡片分佈：

CSS Flexbox：靈活的卡片清單

Flexbox 提供了一個簡單的方法。 flex-wrap: wrap 允許換行到新行，gap 控制間距：

<code class="language-css">.list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}</code>

這會產生水平流：

但是，為 .item (width: 100px;) 設定固定寬度可防止卡片擴展以填充可用空間，從而留下間隙：

使用 justify-content 屬性（如 space-between、space-around 等）並不能完美解決均勻分佈問題：

與 flex-grow 和 flex-basis

均勻發卡

flex-basis 設定初始卡片大小，而 flex-grow: 1（或 flex: 1）允許按比例增長：

<code class="language-css">.item {
  /* other styles */
  flex: 1;
  flex-basis: 100px;
}</code>

這改善了分佈，但最後一張卡片可能仍會不均勻地擴展：

CSS 網格：響應式解

CSS Grid 提供了更強大的解決方案。 display: grid 和 gap 的使用方式與 Flexbox 類似：

<code class="language-css">.list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}</code>

對於反應能力，grid-template-columns 與 auto-fit、minmax() 和 repeat() 是關鍵：

<code class="language-css">.item {
  /* other styles */
  flex: 1;
  flex-basis: 100px;
}</code>

這將創建一個完全響應式佈局：

總結

Flexbox 和 Grid 都提供強大的版面功能。 Flexbox 擅長一維佈局，而 Grid 擅長二維控制。 選擇合適的工具取決於特定的設計要求。

編碼愉快！ ？

？ 透過我的新書《學習 Vue》了解 Vue 3 和 TypeScript！

？ 在 X 上與我聯繫 |領英。

喜歡這篇文章嗎？分享吧！ ?? ？

以上是掌握靈活的佈局：響應式設計的 CSS Flexbox VS Grid的詳細內容。更多資訊請關注PHP中文網其他相關文章！