Comment obtenir des éléments flexibles qui se chevauchent dans une série horizontale ?

Comment faire chevaucher des éléments flexibles ?

Défi :
Afficher une série horizontale de cartes qui peuvent se chevaucher, même si il y en a trop pour tenir dans la largeur donnée.

Solution :

En utilisant Flexbox, nous pouvons créer des cartes superposées en les enveloppant dans un conteneur contrôlé par débordement :

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

Explication :

• Nous définissons le débordement : caché sur chaque .cardWrapper, à l'exception du dernier et de ceux en survol. Cela garantit que toutes les cartes, sauf la dernière, sont cachées sous le conteneur.
• min-width empêche les cartes de devenir trop étroites et de disparaître.
• align-content : le centre aligne les cartes verticalement dans le conteneur.

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!