flex-wrap - Propriété CSS
Résumé des caractéristiques de la propriété flex-wrap
nowrap
| wrap
| wrap-reverse
nowrap
flex-wrap
passe d'une valeur à l'autre sans transition.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
.
- 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.
123456flex-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.123456flex-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.123456flex-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.
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%.
Prise en charge par les navigateurs (compatibilité).
Aucun problème de compatibilité n'est à signaler concernant la propriété flex-wrap
.
flex-wrap
flex-wrap
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.