Pourquoi mes éléments Flex ne sont-ils pas regroupés sur plusieurs lignes ?

Pourquoi les éléments Flex ne sont pas emballés ?

Lorsque vous essayez de créer plusieurs lignes d'éléments dans un conteneur flexible, mais que vous êtes témoin tous confinés à une seule ligne débordante, cela est probablement dû au flex-wrap par défaut

Comportement flex-wrap par défaut

Par défaut, les conteneurs flexibles ont une propriété flex-wrap définie sur nowrap. Cela signifie que tous les éléments enfants (« éléments flexibles ») sont limités à une seule ligne, quelle que soit leur largeur collective. Par conséquent, lorsque la largeur combinée des éléments flex dépasse celle de leur conteneur parent, ils débordent et apparaissent sur la même ligne.

Résoudre le problème : définir flex-wrap sur wrap

Pour permettre aux éléments flexibles d'être enroulés sur plusieurs lignes, la propriété flex-wrap doit être définie sur envelopper. Cela permet aux éléments de circuler naturellement, passant d'une ligne à l'autre lorsque la largeur du conteneur est atteinte.

<br>.container {<br> display: flex;<br> flex- envelopper: wrap;<br>}<br>

Exemple d'emballage flexible

Considérons l'exemple suivant :

< ;pre>
.container {
affichage : flex;
flex-wrap: wrap;
width: 600px;
}

.item {
width: 200px;
height: 200px;
background- couleur : bleu ;
marge : 5px;
}

Ce code crée un conteneur flexible avec une largeur fixe de 600px. À l’intérieur de ce conteneur se trouvent trois éléments flexibles, chacun d’une largeur de 200 px. Avec flex-wrap défini sur wrap, les éléments flexibles s'enrouleront automatiquement pour s'adapter à la largeur du conteneur.

En résumé, pour permettre aux éléments flexibles de s'enrouler sur plusieurs lignes, assurez-vous que la propriété flex-wrap est explicitement définie envelopper. Cela leur permettra de circuler naturellement dans les dimensions du conteneur.

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!