Wie erstelle ich überlappende Flex-Elemente in einer horizontalen Reihe?

Erstellen überlappender flexibler Elemente

Beim Erstellen einer horizontalen Reihe flexibler Elemente, die möglicherweise die verfügbare Breite überschreiten, ist es oft wünschenswert, dass sie sich überlappen . Standardmäßig verkleinert Flexbox die Elemente, damit sie in den Container passen.

Flexbox-Ansatz

Um Überlappungen zu erreichen, können wir den folgenden Ansatz verwenden:

.cards {<br> display: flex;<br> align-content: center;<br> max- Breite: 35em;<br>}</p>
<p>.cardWrapper {<br> Überlauf: versteckt;<br>}</p>
<p>.cardWrapper:last-child, .cardWrapper:hover {</p>
<pre class="brush:php;toolbar:false">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;

}

• Verpacken Sie jedes Flex-Element in ein .cardWrapper-Div.
• Stellen Sie den .cardWrapper standardmäßig so ein, dass der Überlauf ausgeblendet ist. Dadurch wird jeglicher Überlauf aus der untergeordneten .card ausgeblendet.
• Verwenden Sie :last-child oder :hover, um zuzulassen, dass das letzte Element oder die Elemente, auf die sich der Mauszeiger bewegt, ihren Überlauf anzeigen.
• Setzen Sie die .card-Elemente auf haben eine feste Breite und eine Mindestbreite, um zu verhindern, dass sie verkleinert werden.
• Verstecken Sie alle Überläufe aus den .card-Elementen mit overflow: versteckt.

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