flex-flow - Propriété CSS
Résumé des caractéristiques de la propriété flex-flow
row
| row-reverse
| column
| column-reverse
| nowrap
| wrap
| wrap-reverse
flex-flow
passe d'une valeur à l'autre sans transition.Description de la propriété flex-flow
.
flex-flow
est une propriété résumée qui permet de définir en une seule règle les deux propriétés suivantes :
flex-direction
: définit l'axe principal du conteneur flex-box.flex-wrap
: gère les retours à la ligne (ou sur une nouvelle colonne) à l'intérieur du conteneur flex-box.
Les containers flex sont sensibles au sens d'écriture. Ce qui veut dire que la propriété writing-mode
interagit également sur la notion d'axe principal.
En écriture CJK par exemple, les lignes sont verticales (ce que, nous, en langue latine, appelons des colonnes).
Syntaxes pour flex-flow
.
- flex-flow: row;
Dans ce premier exemple de syntaxe, l'axe principal est défini suivant les lignes du conteneur : les éléments internes du flex-box se positionnent les uns à côté des autres. Lorsque le bout de la ligne est atteinte, les éléments suivants ne sont pas autorisés à commencer une nouvelle ligne. Il y a donc risque de débordement du conteneur flex.
Rappelons que l'axe principal et l'axe secondaire d'un conteneur flex sont définis par la propriété
flex-direction
.123456flex-flow:row;
- flex-flow: row wrap; flex-flow: row nowrap; flex-flow: row wrap-reverse;
Les éléments internes du flex-box se positionnent comme dans notre premier exemple, c'est à dire qu'ils se disposent les uns à côté des autres sur une même ligne, mais la deuxième valeur détermine si les éléments peuvent commencer une nouvelle ligne :
wrap
: les nouvelles lignes sont autorisées.nowrap
: les retours à la ligne ne sont pas autorisés. C'est la valeur par défaut.nowrap
: les retours à la ligne sont autorisés. La ligne suivante se positionne au dessus de la ligne précédente.
123456flex-flow:row wrap;
123456flex-flow:row wrap;
- flex-flow: row-reverse; flex-flow: row-reverse nowrap; flex-flow: row-reverse wrap; flex-flow: row-reverse wrap-reverse;
L'axe principal du conteneur flex est défini suivant les lignes, mais avec un remplissge en ordre inverse : on commence à remplit à partir de la fin du conteneur. Les éléments internes du flex-box se positionnent donc côte à côte en commençant par la fin du conteneur, L'autorisation de retours à la ligne est définie par la deuxième valeur (voir ci-dessus).
123456flex-flow:row-reverse wrap;
123456flex-flow:row-reverse wrap-reverse;
- flex-flow: column; flex-flow: column nowrap; flex-flow: column wrap; flex-flow: column wrap-reverse;
L'axe principal du conteneur est défini suivant les colonnes. Les éléments internes se positionnent donc les uns en dessous des autres. Les retours sur une nouvelle colonne sont autorisés ou pas, suivant la deuxième valeur (voir ci-dessus).
123456flex-flow:column wrap;
123456flex-flow:column wrap-reverse;
- flex-flow: column-reverse; flex-flow: column-reverse nowrap; flex-flow: column-reverse wrap; flex-flow: column-reverse wrap-reverse;
L'axe principal du conteneur flex est défini suivant les colonnes avec un remplissage inversé : en commençant par la fin du conteneur. Chacun des éléments se positionne donc au dessus de l'élément précédent. Les retours sur une nouvelle colonne sont autorisés ou pas, suivant la deuxième valeur (voir ci-dessus).
123456flex-flow:column-reverse wrap;
123456flex-flow:column-reverse wrap-reverse;
- flex-flow:
initial
; flex-flow:inherit
; flex-flow:revert
; flex-flow:revert-layer
; flex-flow:unset
;La valeur initiale est :
Voir les propriétés individuelles.
.
Animation de flex-flow
.
Voici un petit effet visuel réalisé en animant les deux valeurs de la propriété flex-flow
.
Ceci dit, cette propriété n'est pas vraiment faite pour ça.
Simulateur.
Prise en charge par les navigateurs (compatibilité).
Les mises en page par flex-box sont bien prises en charge par tous les navigateurs actuels. Il en est de même pour la propriété flex-flow
.
flex-flow
flex-flow
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-flow
.
Les spécifications CSS éditées par le W3C sont organisées en modules. flex-flow
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.