logo oujood
🔍

Utiliser la propriété CSS flex-flow pour disposer les éléments d'un conteneur flexible

OUJOOD.COM

Définition et utilisation da la propriété css

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.
Valeurs par défautrow nowrap
Inherited: non
Animable : non En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.flexFlow="column nowrap"

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.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion29
21 -webkit-		1128
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 :

Exemple    📋 Copier le code 

 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> La propriété CSS flex-flow  </title>
 <style> 
.container {
  width: 300px;
  display: flex;
  flex-flow: column wrap;
}

.item {
  width: 100px;
  height: 100px;
  border:solid 1px #000;
}

</style>
</head>
<body>

<h1>Changer flex-flow </h1>

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

</body>
</html>

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

Exemple    📋 Copier le code 

.container {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
}
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:

Exemple    📋 Copier le code 

// 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:

Exemple    📋 Copier le code 

myElement.style.setProperty("flex-flow", "column");

Notez que vous devrez également définir la propriété display de l'élément sur flex pour que la propriété flex-flow fonctionne correctement.

- Liste des propriétés css -