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

Statut

Standard

Utilisable sur

HTML

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)

CSS Flexible Box Layout Module Level 1

Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de `flex-wrap`.

Schéma syntaxique de la propriété flex-wrap
Les liens du schéma donnent accès à plus de détails

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 .

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

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;

Valeurs communes :


flex-wrap: initial  (nowrap)
flex-wrap: inherit
flex-wrap: revert
flex-wrap: revertLayer
flex-wrap: unset

Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Exemple d'Animation de la propriété `flex-wrap`.

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

Simulateur avec la propriété `flex-wrap`.

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 :

nowrap

wrap

wrap-reverse

Prise en charge de `flex-wrap` par les navigateurs.

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

Colonne 1

Prise en charge des conteneurs flex-box de façon générale.

Colonne 2

Support de la propriété flex-wrap qui autorise ou non les retours à la ligne dans un conteneur flex-box.

Remarques :

(1) Implémentation partielle. De nombreux bogues présents.

Support des
Flex-box

Propriété
flex-wrap

Estimation de la prise en charge globale.

97%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Safari

Safari sur IOS

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété `flex-wrap`.

Module CSS - Mise en page par flex-box - Niveau 1

Première introduction de la définition de la propriété flex-wrap.

23 Juillet 2009
Document de travail.
18 Septembre 2012
Candidat à la recommandation.

Voir aussi, à propos des flex-box.

Les spécificités des flex-box sont décrites dans le module CSS Flexible Box Layout Module. La propriété flex-wrap figure dans ce module, ainsi que toutes celles qui sont listée ci-dessous.

Propriétés :

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

Enchaî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.

order

Définit l'ordre des éléments dans un flex-box.