Création d’un menu HTML et CSS en utilisant le flexbox

Dans un exercice précédent, nous avons réussi à créer un menu déroulant et sticky en HTML et en CSS en utilisant notamment les propriétés float et position.

Pour rappel, voici le code et le résultat auquel on était parvenu :

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

Le résultat était relativement bon mais pas parfait. Une chose était particulièrement ennuyeuse avec ce menu : le fait qu’on avait dû définir un width : 25% pour chaque élément de menu.

Cela rend le menu peu flexible puisque chaque élément va prendre exactement la même place quel que soit son contenu et car il faudra changer la valeur de largeur dès qu’on enlève ou ajoute un élément pour garder un affichage correct.

Ici, le flexbox semble tout indiqué pour résoudre nos problèmes puisqu’on va pouvoir laisser les éléments se redimensionner en fonction des autres et grossir ou rétrécir selon l’espace restant dans le conteneur. Reprenons donc notre menu et transformons-le en utilisant le modèle des boites flexibles.

 

Création d’un menu horizontal en utilisant le flexbox

Nous allons conserver exactement le même code HTML que dans notre menu précédent et n’allons modifier que le CSS.

La première chose que nous allons faire ici va être de retirer tout ce qui a rapport aux flottants.
Ensuite, nous allons définir un conteneur flexible en ajoutant un display : flex à notre menu principal (représenté par un élément ul).

On va alors pouvoir retirer la propriété width pour nos éléments flexibles li et ajouter plutôt un flex : 1 1 auto ce qui va permettre aux éléments d’avoir une taille de base relative à leur contenu et ensuite de pouvoir grandir pour occuper l’espace vide ou rétrécir pour laisser de la place à de nouveaux éléments.

Nous allons toujours vouloir afficher nos sous menus en colonne et, ça tombe bien, le flexbox nous permet de gérer la direction de nos éléments flexibles.

On va donc déclarer nos conteneurs .sous comme des conteneurs flexibles et leur ajouter un flex-flow : column wrap. On va ensuite à nouveau passer un flex : 1 1 auto à nos éléments flexibles.

Et voilà tout ! Notre menu est désormais flexible et les éléments de menu vont occuper une place relative à leur contenu et pouvoir rétrécir ou s’agrandir en fonction de la taille de la fenêtre et des autres éléments du menu.

Voici le code complet du menu :

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

Note : Si vous voulez que les différents éléments de menu occupent tous le même espace de base, il suffit de changer la valeur de flex-basis de auto à 0.