Utiliser la propriété CSS flex-flow pour disposer les éléments d'un conteneur flexible
Le propriété CSS flex-flow permet de définir la direction de l'affichage des éléments d'un container en utilisant la flexbox. Elle peut être utilisée pour aligner horizontalement ou verticalement les éléments enfants d'un container.
La propriété CSS flex-flow est une propriété raccourcie qui permet de définir la direction d'affichage des éléments enfants d'un container en utilisant la flexbox. Elle combine les propriétés flex-direction et flex-wrap en une seule propriété.
En utilisant flex-flow, vous pouvez aligner les éléments enfants d'un container horizontalement ou verticalement, et contrôler si les éléments doivent être enroulés sur plusieurs lignes ou colonnes. Cela peut être utile pour créer des interfaces utilisateur flexibles et adaptables à différentes tailles d'écran.
La Syntaxe CSS
flex-flow: flex-direction | flex-wrap;
flex-direction détermine la direction d'affichage des éléments enfants du container. Les valeurs possibles sont row, row-reverse, column et column-reverse.
flex-wrap détermine si les éléments enfants doivent être enroulés sur plusieurs lignes ou colonnes. Les valeurs possibles sont nowrap, wrap et wrap-reverse.
Prise en charge de la propriété css dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.
Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.
Explorateur
Verssion
29 21 -webkit-
11
28 18 -moz-
9 6.1 -webkit-
17
Valeurs de la propriété
flex-direction : Détermine la direction d'affichage des éléments enfants du container
Valeurs possibles:
row
row-reverse
column
column-reverse
initial
inherit
Valeur par defaut "row". flex-wrap : Détermine si les éléments enfants doivent être enroulés sur plusieurs lignes ou colonnes.
Valeurs possibles:
nowrap
wrap
wrap-reverse
initial
inherit
Valeur par defaut "nowrap". initial : Définit cette propriété à sa valeur par défaut. inherit : Hérite cette propriété de son élément parent.
Voici un exemple d'utilisation de la propriété flex-flow pour aligner verticalement les éléments enfants d'un container et les faire enrouler sur plusieurs lignes :
Dans cet exemple, les éléments enfants du container seront alignés verticalement et enroulés sur plusieurs lignes si nécessaire. Vous pouvez également utiliser la propriété align-content pour contrôler l'espacement vertical des lignes d'éléments enfants. Comme dans l'exemple suivant
Dans cet exemple, les éléments enfants du container seront alignés horizontalement et enroulés sur plusieurs lignes si nécessaire, avec un espace égal entre chaque ligne.
Comment utiliser la propriété flex-flow en JavaScript
Pour utiliser la propriété CSS flex-flow en JavaScript, vous pouvez accéder à l'élément HTML souhaité et définir sa propriété style avec la valeur souhaitée pour flex-flow. Par exemple, si vous souhaitez que l'élément avec l'ID "my-element" ait un flux de flexion vertical, vous pourriez utiliser le code suivant:
// Accéder à l'élément HTML
var myElement = document.getElementById("my-element");
// Définir la propriété flex-flow de l'élément avec la valeur "column"
myElement.style.flexFlow = "column";
Vous pouvez également utiliser la méthode setProperty de l'objet CSSStyleDeclaration pour définir la propriété flex-flow en utilisant le nom complet de la propriété, comme ceci: