CSS - Propriété flex-wrap
Description de la propriété flex-wrap
.
flex-wrap
autorise et/ou définit les retours à la ligne dans un container flex.
Syntaxes pour flex-wrap
.
flex-wrap: nowrap;
Tous les éléments internes du container flex-box restent sur la même ligne, quitte à ce que leurs dimensions soit réduites, ou qu'il y ait débordement.
flex-wrap: wrap;
Les éléments internes sont autorisés à se disposer sur plusieurs lignes. Leur dimension, définie par
flex-basis
, est respectée.flex-wrap: wrap-reverse;
Les éléments internes sont autorisés à se disposer sur plusieurs lignes, comme pour la valeur
wrap
, mais les lignes sont en ordre inverse : la ligne suivante se positionne au dessus de la ligne précédente.flex-wrap:
initial
;La valeur initiale est
nowrap
.-
Reportez-vous à la description générale de ces valeurs.
Simulateur.
Dans l'exemple ci-dessous, les éléments internes ont une largeur (flex-basis
) fixée à 25%
avec la possibilité de se réduire si la place est insuffisante dans le container.
En autorisant les retours à la ligne on permet aux éléments de retrouver leur largeur de base de 25%.
flex-wrap
:
Voir aussi...
Flex-box - Propriétés.
align-content
: Disposition des lignes dans un flex-box ou une grille.align-items
: Disposition verticale des éléments dans un flex-box ou une grille.align-self
: Position verticale de l'un des éléments dans un flex-box ou une grille.display
: Type de l'élément et la façon de l'afficher.flex
: Propriété raccourcie pour définir les principales caractéristiques d'un flex-box et des éléments internes.flex-basis
: Détermine la dimension par défaut d'un élément contenu dans un flex-box.flex-direction
: Choisit l'axe principal et l'axe secondaire d'un flex box.flex-flow
: Echaînement des éléments enfant dans un flex-box.flex-grow
: Autorise ou non l'agrandissement d'un élément contenu dans un flex-box.flex-shrink
: Autorise ou non la compression d'un élément contenu dans un flex-box.justify-content
: Définit le positionnement horizontal dans un flex-box ou une grille.order
: Ordre des éléments dans un flex-box.