Cas d’utilisation et limites du flexbox

Le modèle des boites flexibles ou flexbox est un modèle de disposition très puissant qui permet de créer un conteneur et des éléments flexibles, c’est-à-dire des éléments qui vont pouvoir se réorganiser lorsque le conteneur change de dimension mais également les uns par rapport aux autres.

Nous allons pouvoir utiliser les propriétés suivantes pour déclarer un conteneur flexible et disposer nos différents éléments :

• display : flex nous permet de créer un conteneur flexible ;
• flex-direction nous permet de choisir l’axe principal et la direction des éléments flexibles selon cet axe ;
• flex-wrap nous permet de laisser la possibilité aux éléments flexibles qui dépassent du conteneur d’aller à la ligne ou sur une nouvelle colonne et de définir la direction des éléments selon l’axe secondaire ;
• order permet de choisir l’ordre d’affichage des éléments ;
• justify-content permet de définir l’alignement des éléments dans leur axe principal ;
• align-items permet de définir l’alignement des éléments dans leur axe secondaire ;
• align-self permet de définir l’alignement d’un élément en particulier dans son axe secondaire ;
• align-content permet de définir l’alignement des lignes ou des colonnes selon l’axe secondaire ;
• flex-grow permet de laisser la possibilité aux éléments flexibles de grossir pour absorber l’espace vide dans le conteneur ;
• flex-shrink permet de laisser la possibilité aux éléments flexibles de rétrécir dans le conteneur ;
• flex-basis permet de définir une taille de base pour les éléments flexibles.

En pratique, nous allons pouvoir recourir au modèle des boites flexibles pour résoudre simplement de nombreuses questions d’affichage et de positionnement qui pouvaient poser problème par le passé.

 

Exemples concrets d’utilisation du flexbox

Effectuer un centrage parfait

Pendant très longtemps, il a été très difficile d’obtenir un centrage parfait en toute circonstance pour un élément ou un ensemble d’éléments et notamment un centrage vertical.

Cela devient très facile avec le flexbox puisqu’on va pouvoir centrer les éléments dans leur axe principal et dans leur axe secondaire.

See the Pen Cours HTML CSS 13.5.1 by Pierre (@pierregiraud) on CodePen.

Ici, on centre le ou les éléments par rapport à leur axe principal dans leur conteneur avec justify-content : center et on les centre également dans leur axe secondaire avec align-items : center.

Créer un menu avec le flexbox

Dans les parties précédentes, je vous ai proposé de créer un menu horizontal simple puis un menu déroulant.

Pour que notre menu principal s’affiche de manière horizontale, nous avons utilisé la propriété float.

Ensuite, pour que les éléments du menu s’affichent correctement, nous leur avons attribué une largeur égale à 100% divisée par le nombre d’éléments.

Cette méthode n’était pas parfaite, loin de là. En effet, imaginons qu’on modifie le nombre d’éléments dans le menu : il faudra alors modifier la largeur donnée à chaque élément de menu. De même, selon la taille de certains écrans, on aimerait pouvoir distribuer l’espace dans le conteneur d’une façon ou d’une autre. Nous allons pouvoir gérer tout cela facilement avec le flexbox.

See the Pen Cours HTML CSS 13.5.2 by Pierre (@pierregiraud) on CodePen.

Ici, on attribue un flex : 1 1 0 à nos éléments de menu. Cela signifie que nos différents éléments de menu vont tous avoir la même taille de base avec flex-basis : 0 et vont pouvoir grandir ou rétrécir pour absorber l’espace vide du menu ou pour faire de la place à de nouveaux éléments.

Grouper des éléments

Le flexbox va également nous permettre simplement de créer des groupes d’éléments et de les aligner d’un côté ou de l’autre du conteneur. Pour cela, nous allons utiliser la propriété margin et sa valeur auto qui va faire que la marge va consommer tout l’espace vide dans le conteneur.

See the Pen Cours HTML CSS 13.5.3 by Pierre (@pierregiraud) on CodePen.

Ici, on attribue un margin-left : auto au troisième élément de notre menu. Cela fait que sa marge gauche va consommer tout l’espace vide du conteneur et va donc repousser l’élément et les éléments suivants sur la droite. Cela va être particulièrement utile pour la création de menus.

Styliser les formulaires

Imaginons que l’on souhaite créer un formulaire d’inscription à une newsletter. La seule information qu’on va demander aux utilisateurs va être leur adresse mail.

Ici, plutôt que d’afficher notre unique input sur une ligne puis le bouton d’envoi du formulaire en dessous, on aimerait tout avoir sur la même ligne pour des questions d’ergonomie.

Cependant, pour que nos éléments de formulaire alignés s’affichent toujours bien, il va falloir qu’ils se redimensionnent les uns par rapport aux autres en fonction de l’espace disponible. On va pouvoir faire cela très simplement avec le flexbox.

See the Pen Cours HTML CSS 13.5.4 by Pierre (@pierregiraud) on CodePen.

Ici, on applique flex : 1 1 auto à notre input de type email afin que celui-ci se redimensionne en fonction des éléments autour et pour qu’il occupe toujours tout l’espace vide dans le conteneur.

 

Les limites du flexbox

Le modèle des boites flexibles est à l’heure actuelle l’un des modèles de disposition les plus puissants que l’on puisse utiliser. Cependant, comme ce modèle est relativement récent, l’implémentation n’est pas encore parfaite et certaines propriétés manquent pour le moment.

Cela va être notamment le cas pour la gestion des gouttières, c’est-à-dire de l’espace entre les éléments flexibles. En effet, par défaut, nos différents éléments flexibles vont venir se coller les uns aux autres.

Pour créer des gouttières, c’est-à-dire pour créer un espace entre ces éléments, j’ai jusqu’à présent utilisé la propriété margin. Le problème ici est que cela va également créer un espace entre les éléments et le bord du conteneur, ce qui n’est pas toujours le comportement voulu.

Pour annuler cet espace, la solution actuellement admise est d’attribuer des marges négatives au conteneur qui vont venir contrebalancer les marges attribuées aux éléments flexibles.

Notez qu’on ne sera bientôt plus obligé d’utiliser cette technique puisque deux nouvelles propriétés qui vont nous permettre justement de créer des gouttières sont en train d’être ajoutées au modèle des boites : les propriétés row-gap et column-gap. Ces propriétés ne sont néanmoins pour le moment pas supportées par la plupart des navigateurs.

See the Pen Cours HTML CSS 13.5.5 by Pierre (@pierregiraud) on CodePen.