Bagaimana untuk Mencapai Item Flex Bertindih: Mengatasi Elemen Mengecut dan Melaksanakan Pertindihan Anggun?

Item Flex Bertindih

Mencipta siri elemen bertindih secara mendatar menggunakan flexbox boleh mencabar, kerana ia boleh menyebabkan saiz elemen mengecil . Mari kita mendalami isu ini dan teroka penyelesaian.

Contoh yang disediakan di bawah menunjukkan masalah:

<code class="css">.cards {
  display: flex;
  max-width: 300px;
}

.card {
  width: 50px;
  height: 90px;
  border: 1px solid black;
  border-radius: 3px;
  background-color: rgba(255, 0, 0, 0.4);
}</code>

<code class="html"><div class='cards'>
  <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></code>

Dalam contoh ini, kad mengecut untuk dimuatkan dalam lebar maksimum kekangan, membawa kepada hasil yang tidak diingini. Untuk menyelesaikan masalah ini, mari kita gunakan pendekatan yang disemak semula:

<code class="css">.cards {
  display: flex;
  align-content: center;
  max-width: 35em;
}

.cardWrapper {
  overflow: hidden;
}

.cardWrapper:last-child, .cardWrapper:hover {
    overflow: visible;
}

.card {
    width: 10em;
    min-width: 10em;
    height: 6em;
    border-radius: 0.5em;
    border: solid #666 1px;
    background-color: #ccc;
    padding: 0.25em;
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}</code>

<code class="html"><div class="cards">
  <div class="cardWrapper">
    <div class="card">card 1 blah blah blah</div>
  </div>
  <div class="cardWrapper">
    <div class="card">card 2 blah blah blah</div>
  </div>
  <div class="cardWrapper">
    <div class="card">card 3 blah blah blah</div>
  </div>
  <div class="cardWrapper">
    <div class="card">card 4 blah blah blah</div>
  </div>
  <div class="cardWrapper">
    <div class="card">card 5 blah blah blah</div>
  </div>
</div></code>

Dalam penyelesaian yang diubah suai ini, kami memperkenalkan pembungkus (cardWrapper) di sekeliling setiap kad. Pembalut bertindak sebagai bekas dan mengawal kelakuan limpahan kandungannya. Secara lalai, pembungkus disembunyikan, tetapi pembungkus terakhir dan mana-mana pembungkus yang dituding menjadi kelihatan, membolehkan kad bertindih apabila perlu. Pendekatan ini memastikan bahawa kad mengekalkan dimensi yang diingini dan bertindih dengan anggun.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Item Flex Bertindih: Mengatasi Elemen Mengecut dan Melaksanakan Pertindihan Anggun?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!