Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Barbara Streisand
Freigeben: 2024-10-31 11:47:02
Original
306 Leute haben es durchsucht

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

Ü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>
Nach dem Login kopieren
<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>
Nach dem Login kopieren

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>
Nach dem Login kopieren
<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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage