Bagaimana untuk Mencapai Item Flex Bertindih dalam Siri Mendatar?

Bagaimana untuk Membuat Item Flex Bertindih?

Cabaran:
Paparkan siri mendatar kad yang boleh bertindih antara satu sama lain, walaupun jika terdapat terlalu banyak untuk dimuatkan dalam lebar yang diberikan.

Penyelesaian:

Menggunakan Flexbox, kita boleh mencipta kad bertindih dengan membungkusnya dalam bekas terkawal limpahan:

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

Penjelasan:

• Kami menetapkan limpahan: tersembunyi pada setiap .cardWrapper, kecuali yang terakhir dan yang berada di tuding. Ini memastikan semua kecuali kad terakhir tersembunyi di bawah bekas.
• lebar min menghalang kad daripada menjadi terlalu sempit dan hilang.
• kandungan sejajar: tengah menjajarkan kad secara menegak dalam bekas.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Item Flex Bertindih dalam Siri Mendatar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!