Comment obtenir des éléments flexibles qui se chevauchent : surmonter la diminution des éléments et mettre en œuvre des chevauchements gracieux ?-tutoriel CSS-php.cn

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

Barbara Streisand

Libérer： 2024-10-31 11:47:02

original

346 Les gens l'ont consulté

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

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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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!