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 :

flex-wrap - Propriété CSS

flex-wrap

Résumé des caractéristiques de la propriété flex-wrap

Description rapide
Gestion des retours à la ligne dans un container flex.
Statut
Standard
Type de valeur
Valeur prédéfinie
Valeurs prédéfinies
nowrap | wrap | wrap-reverse
Pourcentages
Ne s'appliquent pas.
Valeur initiale
nowrap
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété flex-wrap passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Mise en page par flex-box
Références (W3C)
Statut du document:: CR (document proposé pour la recommandation)

Description de la propriété flex-wrap.

flex-wrap autorise ou interdit les retours à la ligne dans un flex-box, et définit comment doivent se faire ces retours à la ligne.

flex-wrap doit être appliquée à un container flex. La propriété sera sans effet sur autre type d'élément .

Syntaxes pour flex-wrap.

Syntaxe de flex-wrapSchéma syntaxique de la propriété CSS flex-wrap (gestion des retours à la ligne dans un conteneur flex). nowrap nowrap wrap wrap wrap-reverse wrap-reverseflex-wrap:;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.

    1
    2
    3
    4
    5
    6
    flex-wrap:nowrap;
  • flex-wrap: wrap;

    Les éléments internes du flex-box sont autorisés à se disposer sur plusieurs lignes. Leur dimension, définie par flex-basis, est respectée.

    1
    2
    3
    4
    5
    6
    flex-wrap:wrap;
  • 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.

    1
    2
    3
    4
    5
    6
    flex-wrap:wrap-reverse;
  • flex-wrap: initial; flex-wrap: inherit; flex-wrap: revert; flex-wrap: revert-layer; flex-wrap: unset;

    La valeur initiale est : nowrap.

Exemple d'animation de flex-wrap.

La propriété flex-wrap peut être animée mais se prête mal à des effets visuels intéressants.

A
B
C
D

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

Prise en charge par les navigateurs (compatibilité).

Aucun problème de compatibilité n'est à signaler concernant la propriété flex-wrap.

Colonne 1
Capacité à restituer, de façon générale, les mises en page avec des conteneurs flex-box.
Colonne 2
Support de la syntaxe de la propriété CSS flex-wrap
1
Flex˗box
2
flex-wrap
Estimation de la prise en charge en pourcentage du parc actuel.
98%
94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que flex-wrap.

Les spécifications CSS éditées par le W3C sont organisées en modules. flex-wrap fait partie du Module CSS - Mise en page par flex-box (CSS Flexible Box Layout Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Propriété raccourcie pour définir les principales caractéristiques d'un flex-box et des éléments internes.
Détermine la dimension par défaut d'un élément contenu dans un flex-box.
Choisit l'axe principal et l'axe secondaire d'un flex box.
Echaînement des éléments enfant dans un flex-box.
Autorise ou non l'agrandissement d'un élément contenu dans un flex-box.
Autorise ou non la compression d'un élément contenu dans un flex-box.
Ordre des éléments dans un flex-box.