Wie erreicht man überlappende Flex-Elemente in einer horizontalen Serie?

Wie überlappen sich flexible Elemente?

Herausforderung:
Zeigen Sie eine horizontale Reihe von Karten an, die sich gegenseitig überlappen können, auch wenn Es sind zu viele vorhanden, um in die angegebene Breite zu passen.

Lösung:

Mit Flexbox können wir überlappende Karten erstellen, indem wir sie in einen überlaufkontrollierten Behälter einpacken:

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

Erklärung:

• Wir setzen overflow:hiden auf jedem .cardWrapper, mit Ausnahme des letzten und derjenigen, die sich im Hover befinden. Dadurch wird sichergestellt, dass alle bis auf die letzte Karte unter dem Behälter verborgen sind.
• min-width verhindert, dass Karten zu schmal werden und verschwinden.
• align-content: center richtet die Karten vertikal innerhalb des Behälters aus.

Das obige ist der detaillierte Inhalt vonWie erreicht man überlappende Flex-Elemente in einer horizontalen Serie?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!