Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mencapai Item Flex Bertindih: Mengatasi Elemen Mengecut dan Melaksanakan Pertindihan Anggun?

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

Barbara Streisand
Barbara Streisandasal
2024-10-31 11:47:02235semak imbas

How to Achieve Overlapping Flex Items: Overcoming Shrinking Elements and Implementing Graceful Overlaps?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn