Comment créer des éléments flexibles qui se chevauchent dans une ligne horizontale ?

Création d'éléments flexibles qui se chevauchent

Lors de la création d'une rangée horizontale d'éléments flexibles pouvant dépasser la largeur disponible, il est souvent souhaitable de les faire se chevaucher . Par défaut, flexbox réduira les éléments pour les adapter au conteneur.

Approche Flexbox

Pour obtenir un chevauchement, nous pouvons utiliser l'approche suivante :

.cards {<br> display: flex;<br> align-content: center;<br> max- largeur : 35em;<br>}</p>
<p>.cardWrapper {<br> débordement : caché;<br>}</p>
<p>.cardWrapper:last-child, .cardWrapper:hover {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">overflow: visible;

Copier après la connexion

}

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

}

• Enveloppez chaque élément flexible dans un div .cardWrapper.
• Par défaut, définissez le .cardWrapper pour qu'il soit overflow: caché. Cela masquera tout débordement de la .card enfant.
• Utilisez :last-child ou :hover pour permettre au dernier élément ou aux éléments survolés d'afficher leur débordement.
• Définissez les éléments .card sur ont une largeur fixe et une largeur minimale pour éviter qu'ils ne soient réduits.
• Masquez tout débordement des éléments .card en utilisant overflow : caché.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!