Comment obtenir des éléments flexibles qui se chevauchent : surmonter la diminution des éléments et mettre en œuvre des chevauchements gracieux ?

Chevauchement d'éléments flexibles

Créer une série d'éléments qui se chevauchent horizontalement à l'aide de flexbox peut être difficile, car cela peut entraîner une diminution de la taille des éléments. . Examinons le problème et explorons une solution.

L'exemple fourni ci-dessous illustre le problème :

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

Dans cet exemple, les cartes se rétrécissent pour s'adapter à la largeur maximale. contrainte, conduisant à un résultat indésirable. Pour résoudre ce problème, adoptons une approche révisée :

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

Dans cette solution modifiée, nous introduisons un wrapper (cardWrapper) autour de chaque carte. Le wrapper agit comme un conteneur et contrôle le comportement de débordement de son contenu. Par défaut, les wrappers sont masqués, mais le dernier wrapper et tout wrapper survolé deviennent visibles, permettant aux cartes de se chevaucher si nécessaire. Cette approche garantit que les cartes conservent leurs dimensions souhaitées et se chevauchent gracieusement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!