如何使用flexbox實現這種響應式佈局

Question

我正在製作一個 React 應用程序，它在 Flex 容器內呈現 xy 數量的卡片和單個小部件。所有卡片具有相同的寬度和高度，但小部件的高度等於卡片高度 * 2 row-gap。容器的寬度會根據視口寬度而變化，並且在視覺上應分別看起來為帶有卡片的 2 或 3 列。為了進一步清晰起見，我提供了所需佈局的模型圖像，小部件以藍色表示。

無論我嘗試什麼，如果不將行的高度更改為其大小，我都無法讓小部件顯示在正確的位置，從而留下一個“空白行”，其中應該呈現1 或2 個以上的卡片，如顯示在下圖。

我目前的解決方案涉及 Javascript，根據視窗寬度，我將 2 或 4 張卡片載入到單獨的小 Flex 容器中，該容器被渲染為主 Flex 容器的第一個子容器。這種解決方法在視覺上效果很好，但使我的程式碼變得更加複雜，因為我必須涵蓋許多不同的情況才能使其正常運作。我想使用 css/flexbox 實現同樣的目標，但我仍然是一個初學者，以前從未做過這樣的佈局，顯然不知道如何做到這一點。小部件無法絕對定位，因為這會破壞其子元素的捲動功能。

我正在以正確的比例提供測試 HTML 和 CSS 測量值，以防有幫助。

.container {
  margin: 50px 300px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;
  column-gap: 20px;
  min-width: 320px; /* Width for 2 columns */
  max-width: 490px; /* Width for 3 columns */
  border: 3px solid rgb(0, 22, 117);
}

.card {
  width: 150px;
  height: 100px;
  background-color: bisque;
}

.widget {
  height: 220px; /* card height * 2 row-gap */
  width: 150px;
  background-color: rgb(134, 204, 245);
}

<div class="container">
  <div class="widget"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

<!-- Original jsx
<div className='container'>
  <div className='widget'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
  <div className='card'></div>
</div>
-->

我真的很想學習如何在 Flexbox 中創建這樣的佈局，不僅是因為我目前的項目，而且也是為了擴展我的知識和理解。如果您對如何解決這個問題有任何想法，請幫助我。預先感謝您:)

Answer 1

這可以使用網格佈局來完成，無需JavaScript，以下是一個範例：

＃＃＃。容器 { 邊距：50 像素 300 像素； 顯示：網格； /* 自動計算列，最小單元格寬度為 140px */ 網格模板列：重複（自動填充，minmax（140px，1fr））； /* 每個單元格的高度 */ 網格自動行：100px； 網格自動流：行密集； 間隙：20px； 最小寬度：320px； 最大寬度：490px； 邊框: 3px 實心 rgb(0, 22, 117); } 。卡片 { 背景顏色：素色； } .widget { 背景顏色: rgb(134, 204, 245); /* 小部件，跨距為 2 行 */ 網格行：自動/跨度2； /* 將小工具設定到最右邊的欄位 */ 網格列結束：-1； }

<div class="container"> <div class="widget"></div>

如同@ralph.m 所提到的。您始終可以透過將

grid-column-end: -1; 設定為 .widget.widget >

Answer 2

Flexbox 佈局無法做到這一點，它不會建立 2d 網格，您必須使用 gridbox 佈局。 ，因此元素可以跨越行和列而不留間隙。

這是一個例子：

.grid {
/* give some space gutters */
  margin: 1em auto;
  padding:1em;
  gap: 1em;
 /* build a grid */
  display: grid;
  grid-auto-flow: row dense;/* fill any holes that could show up */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* auto calculate size of the grid */
  grid-auto-rows: 75px; /* give an height row for the demo */
  max-width: 80%;/* whatever */
  border: solid;/* see my boundaries */
}

.card {
  background-color: salmon;
}

.bigger {
  background-color: lightblue;
  grid-row: 1/ span 2;/* keep me on first row and lay over 2 rows */
  grid-column-end: -1; /* keep me on the last column no matter how many */
}

<div class="grid">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="bigger">I can be anywhere in the flow but I'll show on top end</div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>