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.

• flex-wrap: unset; flex-wrap: inherit;

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

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.