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:

overflow: visible;

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;

• Wrap 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 darauf befindlichen Elemente 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.