Le flux des enfants flexibles

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> ...

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>...