Saya sedang membuat apl React yang memaparkan xy bilangan kad dan satu widget di dalam bekas Flex. Semua kad mempunyai lebar dan tinggi yang sama, tetapi ketinggian widget adalah sama dengan 卡片高度 * 2 + row-gap. Lebar bekas berubah berdasarkan lebar port pandangan dan masing-masing sepatutnya kelihatan seperti 2 atau 3 lajur dengan kad. Untuk kejelasan lanjut, saya telah menyediakan imej mockup bagi reka letak yang diperlukan, dengan widget diwakili dengan warna biru.

Tidak kira apa yang saya cuba, saya tidak boleh mendapatkan widget untuk dipaparkan dalam kedudukan yang betul tanpa menukar ketinggian baris kepada saiznya, meninggalkan "baris kosong" di mana 1 atau 2 lagi kad perlu dipaparkan, seperti Ditunjukkan di bawah .

Penyelesaian semasa saya melibatkan Javascript, dan bergantung pada lebar port pandangan, saya memuatkan 2 atau 4 kad ke dalam bekas kecil Flex yang berasingan, yang dijadikan sebagai anak pertama bekas Flex utama. Penyelesaian ini berfungsi dengan baik secara visual, tetapi menjadikan kod saya lebih kompleks kerana saya perlu merangkumi banyak situasi yang berbeza untuk membolehkannya berfungsi dengan baik. Saya ingin mencapai matlamat yang sama menggunakan css/flexbox, tetapi saya masih pemula dan tidak pernah melakukan susun atur seperti ini sebelum ini dan jelas tidak tahu bagaimana untuk melakukannya. Widget tidak boleh 绝对定位 kerana ini akan mematahkan fungsi penatalan elemen anaknya.

Saya menyediakan ukuran HTML dan CSS ujian dalam perkadaran yang betul sekiranya ia membantu.

.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>
-->

Saya sangat ingin belajar cara membuat reka letak seperti ini dalam Flexbox, bukan sahaja untuk projek semasa saya, tetapi juga untuk mengembangkan pengetahuan dan pemahaman saya. Jika anda mempunyai sebarang idea tentang cara untuk menyelesaikan masalah ini, sila bantu saya. Terima kasih terlebih dahulu :)