Bagaimana untuk melaksanakan susun atur responsif ini menggunakan flexbox

Question

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 :)

Answer 1

Ini boleh dilakukan menggunakan susun atur grid, tiada JavaScript diperlukan, berikut ialah contoh:

.container {
  margin: 50px 300px;
  display: grid;
  /* auto calculate columns, minimun cell width is 140px */  
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  
  /* height of each cell */
  grid-auto-rows: 100px;
  
  grid-auto-flow: row dense;
  gap: 20px;
  min-width: 320px;
  max-width: 490px;
  border: 3px solid rgb(0, 22, 117);
}

.card {
  background-color: bisque;
}

.widget {
  background-color: rgb(134, 204, 245);
  /* widget, span for 2 rows */
  grid-row: auto / span 2;
  
  /* set the widget to the right most column */
  grid-column-end: -1;
}

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

Seperti yang disebut oleh @ralph.m. Anda sentiasa boleh melakukan ini dengan menambahkan grid-column-end: -1; 设置为 .widget.widget >

Answer 2

Susun atur Flexbox tidak boleh melakukan ini, ia tidak mencipta grid 2d, anda perlu menggunakan susun atur kotak grid. , jadi elemen boleh merentangi baris dan lajur tanpa meninggalkan jurang. < /p>

Berikut adalah contoh:

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