Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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

flex-wrap :
1
2
3
4
5
6

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.