Wie erreicht man überlappende Flex-Elemente: Überwindung schrumpfender Elemente und Implementierung eleganter Überlappungen?

Überlappende Flex-Elemente

Das Erstellen einer horizontal überlappenden Reihe von Elementen mit Flexbox kann eine Herausforderung sein, da es dazu führen kann, dass die Elemente kleiner werden . Lassen Sie uns das Problem genauer untersuchen und eine Lösung finden.

Das folgende Beispiel veranschaulicht das Problem:

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

In diesem Beispiel werden die Karten verkleinert, damit sie in die maximale Breite passen Einschränkung, die zu einem unerwünschten Ergebnis führt. Um dieses Problem zu lösen, wählen wir einen überarbeiteten Ansatz:

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

In dieser modifizierten Lösung führen wir einen Wrapper (cardWrapper) um jede Karte ein. Der Wrapper fungiert als Container und steuert das Überlaufverhalten seines Inhalts. Standardmäßig sind die Wrapper ausgeblendet, aber der letzte Wrapper und jeder Wrapper, auf dem sich die Karte befindet, werden sichtbar, sodass sich die Karten bei Bedarf überlappen können. Dieser Ansatz stellt sicher, dass die Karten ihre gewünschten Abmessungen beibehalten und sich elegant überlappen.

Das obige ist der detaillierte Inhalt vonWie erreicht man überlappende Flex-Elemente: Überwindung schrumpfender Elemente und Implementierung eleganter Überlappungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!