Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Flexbox et Grid
  3. Le flux des enfants flexibles
Extrait - Flexbox et Grid Créer des sites modernes et responsives
Extraits du livre
Flexbox et Grid Créer des sites modernes et responsives
3 avis
Revenir à la page d'achat du livre

Le flux des enfants flexibles

Définir la direction

Le fichier d’exemple à télécharger se nomme : 01-Exemples Flexbox/C02-A-1-2-3.html.

1. La propriété de direction

La propriété flex-direction va nous permettre de définir la direction principale dans le conteneur flexible parent. Cette direction principale va indiquer comment les éléments enfants seront placés dans le conteneur parent. Nous pouvons définir un axe principal horizontal ou vertical.

Voici les valeurs acceptées par la propriété flex-direction : row, row-reverse, column et column-reverse. La valeur par défaut est row. Il n’y a pas d’héritage.

2. La direction horizontale en ligne

La propriété flex-direction utilise la valeur row par défaut. Cette valeur donne une direction horizontale pour le positionnement des éléments enfants. Donc, si vous omettez la propriété flex-direction: row, elle est automatiquement appliquée. Les flex-items sont donc affichés horizontalement, dans la ligne, les uns à côté des autres, dans l’ordre de saisie dans le code HTML.

Voici un premier exemple :

<div id="conteneur1">  
  <p class="p1">Un. Maecenas faucibus mollis interdum...</p>  
  <p class="p2">Deux. Fusce dapibus, tellus ac cursus commodo...</p> ...

Contrôler le flux des éléments enfants

Le fichier d’exemple à télécharger se nomme : 01-Exemples Flexbox/C02-B.html.

1. Gérer le passage à la ligne

La propriété flex-wrap va déterminer le comportement des éléments enfants dans le conteneur, lorsque ceux-ci devront aller à la ligne suivante. Cela va se produire quand le conteneur ne sera pas assez grand pour contenir tous les enfants dans la direction principale. Nous pourrons interdire le passage à la ligne avec la valeur nowrap ou, au contraire, autoriser le passage à la ligne avec la valeur wrap.

Voici les valeurs utilisables avec la propriété flex-wrap : nowrap, wrap et wrap-reverse. La valeur par défaut est nowrap. Il n’y a pas d’héritage.

2. La propriété pour aller à la ligne

Voici la structure HTML que nous allons utiliser. C’est une simple liste <ul> :

<ul id="conteneur-liste">  
  <li>Un</li>  
  <li>Deux</li>  
  <li>Trois</li>  
  <li>Quatre</li>  
  <li>Cinq</li>  
  <li>Six</li>  
  <li>Sept</li>  
  <li>Huit</li>  
  <li>Neuf</li>  
  <li>Dix</li>...

Le flux des éléments en blocs

Le fichier d’exemple à télécharger se nomme : 01-Exemples Flexbox/C02-C.html.

Dans l’exemple précédent, les éléments enfants sont de type list-item. Voyons maintenant l’utilisation d’éléments enfants de type block, avec des paragraphes <p>.

Voici la structure HTML utilisée :

<div id="conteneur">  
  <p class="p1">Un. Maecenas faucibus mollis interdum...</p>  
  <p class="p2">Deux. Fusce dapibus, tellus ac cursus commodo...</p> 
  <p class="p3">Trois. Duis mollis, est non commodo luctus...</p>  
  <p class="p4">Quatre. Nulla vitae elit libero, a pharetra...</p> 
</div> 

Voici les règles CSS utilisées :

#conteneur {  
  display: flex;  
  flex-direction: row;  
  flex-wrap: wrap;  
  width: 600px;  
  border: 1px solid #000;  
  background-color: #eee;  
}  
p {  
  margin: 0;  
  width: 200px;  
}  
.p1 {  
  background-color: antiquewhite;  
}  
.p2 {  
  background-color: azure;  
}  
.p3 {  
  background-color:...