我正在製作一個 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 中創建這樣的佈局，不僅是因為我目前的項目，而且也是為了擴展我的知識和理解。如果您對如何解決這個問題有任何想法，請幫助我。預先感謝您:)
這可以使用網格佈局來完成，無需JavaScript，以下是一個範例：
grid-column-end: -1;
，在最右邊的列上設定.widget，在最右侧的列上设置設定為.widget>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 */ }