Les boîtes flexibles

1. Les différents types de conteneurs

Une mise en page flexible se crée avec l’utilisation d’un conteneur qui possède la propriété CSS d’affichage display. Cette propriété accepte les valeurs flex ou inline-flex. Ce conteneur est alors considéré comme l’élément parent de la mise en page.

à partir du moment où un conteneur possède les valeurs flex ou inline-flex, tous les éléments enfants inclus seront automatiquement flexibles. Pour la terminologie, il y a donc un flex-container pour le conteneur parent et des flex-items pour les éléments enfants.

L’élément conteneur parent utilisant la valeur d’affichage flex peut être n’importe quel élément HTML : <div>, <nav>, <section>... Dans les premiers exemples, ce sont des boîtes <div> qui seront utilisées pour plus de facilité, avant d’utiliser d’autres éléments HTML plus sémantiques dans les exemples qui suivront.

2. Le conteneur avec un affichage flex

Voici la structure HTML d’un premier exemple très simple d’une mise en page flexible :

<div id="conteneur1">  
  <p class="p1">Un. Maecenas faucibus...</p>  
  <p class="p2">Deux. Fusce...

1. La direction principale

La propriété flex-direction permet de définir la direction principale dans le conteneur flexible parent. Cette direction principale indique comment les éléments enfants seront placés dans le conteneur parent. L’axe principal est soit horizontal, soit vertical.

Voici les valeurs acceptées par la propriété flex-direction : row, row-reverse, column et column-reverse. 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. 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> 
  <p class="p3">Trois. Duis mollis, est non commodo luctus...</p>  
</div> 

Les règles CSS sont les suivantes :

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

Voici l’affichage obtenu :

En étant très précis, l’affichage des éléments enfants est horizontal et de gauche à droite. Les enfants se placent à partir du côté gauche de l’élément...

1. Les alignements sur l’axe principal horizontal

La propriété justify-content permet de gérer l’alignement des éléments enfants dans la direction principale définie dans l’élément parent, avec la propriété flex-direction.

Pour la propriété justify-content, les valeurs utilisables sont : flex-start, flex-end, center, space-between et space-around. La valeur par défaut est flex-start.

Voici la structure HTML constituée d’une simple liste <ul> de cet exemple :

<ul id="conteneur-liste">  
  <li>Un</li>  
  <li>Deux</li>  
  <li>Trois</li>  
  <li>Quatre</li>  
  <li>Cinq</li>  
</ul> 

Voici les règles CSS utilisées :

#conteneur-liste {  
  display: flex;  
  width: 400px;  
  border: 1px solid #000;  
  background-color: #eee;  
  padding: 10px;  
}  
#conteneur-liste li {  
  list-style: none;  
  border: 1px solid #000;  
  padding: 5px; 
  background-color: white;  
} 

Il faut bien noter dans cet exemple que ce sont les valeurs par défaut des propriétés flex-direction: row et flex-wrap: nowrap qui sont utilisées, en ne les déclarant pas dans la règle CSS.

Voici l’affichage obtenu :

Par défaut, le conteneur flexible parent utilise la propriété justify-content: flex-start.

#conteneur-liste {  
  display: flex;  
  justify-content: flex-start ;  
  width: 400px;  
  border: 1px solid #000;  
  background-color: #eee;  
  padding: 10px;  
} 

Cette valeur indique que les éléments enfants sont alignés sur la gauche de l’élément parent, au début de l’axe principal pour être précis.

La valeur flex-end indique que les éléments enfants sont alignés sur la droite de l’élément parent, à la fin de l’axe principal. Voici l’affichage...

1. Les propriétés individuelles

à partir du moment où un conteneur possède la propriété et la valeur display: flex, tous les éléments inclus deviennent des enfants, des flex-items. Pour ces éléments enfants flexibles, des propriétés communes peuvent être appliquées. Mais il est aussi possible appliquer des propriétés CSS flexibles individuelles à un enfant particulier.

2. L’ordre d’affichage des enfants

Les éléments enfants d’un conteneur flexible s’affichent dans l’ordre de saisie dans la structure HTML.

<ul id="conteneur-liste">  
  <li>Un</li>  
  <li>Deux</li>  
  <li>Trois</li>  
  <li>Quatre</li>  
  <li>Cinq</li>  
</ul> 

Voici les règles CSS utilisées :

#conteneur-liste {  
 display: flex;  
 flex-flow: row wrap;  
 justify-content: space-around;  
 width: 300px;  
 border: 1px solid #000;  
 background-color: #eee; padding: 10px;  
}  
#conteneur-liste li {  
 list-style: none;  
 border: 1px solid #000;  
 padding: 5px;  
 background-color: white;  
} 

Voici l’affichage obtenu :

Les éléments enfants <li> sont bien affichés dans l’ordre saisi dans le code HTML.

La propriété order permet de modifier cet ordre. La valeur par défaut est 0 et indique l’ordre défini dans le code HTML. Avec la valeur 1, l’élément ciblé est placé en dernière position, en considérant que tous les autres éléments utilisent la valeur par défaut 0. Avec la valeur -1, l’élément ciblé est placé en première position, avec la même considération précédente. En d’autres termes, l’élément enfant ayant la valeur la plus petite sera affiché au début ; l’élément enfant ayant la valeur la plus grande sera affiché...

1. Les affichages obtenus

Voici l’exemple simple qui va être conçu. La mise en page est en plein écran, avec quatre zones distinctes : un en-tête, une colonne latérale à gauche contenant du texte, une zone centrale pour un article, une colonne latérale à droite contenant une navigation et un pied de page.

Voici son affichage sur un grand écran :

Cette mise en page est responsive, voici son affichage sur un écran plus petit :

Dans l’affichage sur petit écran, la colonne de navigation initialement placée à droite s’affiche maintenant sous l’en-tête.

2. La structure flexible de la mise en page

Voici le schéma de la structure de cette mise en page :

Toute la mise en page est insérée dans l’élément <body>. L’en-tête est logiquement inclus dans l’élément <header> et de même pour le pied de page qui est placé dans l’élément <footer>. La zone centrale est insérée dans l’élément <main> qui inclut la colonne latérale de gauche dans l’élément <aside>, la zone de l’article dans l’élément <article> et la colonne latérale de droite pour la navigation dans l’élément <nav>. Bien sûr, cette structure n’est qu’un exemple et elle peut être adaptée à d’autres besoins.

Avec le schéma précédent, il est clair qu’il y a deux éléments de structure, deux conteneurs qui doivent être flexibles :

3. Les propriétés pour l’élément <body>...