Flexbox en CSS

Introduction

• Présentation de Flexbox
  • Nouveau système de display pour le positionnement des éléments enfants.
  • Permet de créer des layouts complexes plus simplement que les flottants ou le display.
  • Supporté à partir d'Internet Explorer 10 et les navigateurs modernes.
  • Nécessite des préfixes pour IE10 et IE11.

Théorie sur les Flexbox

1. Propriétés principales

   • display: flex; : Définit un conteneur comme Flexbox.
   • flex-direction : Définit la direction des éléments.
     • row : Ligne de gauche à droite (par défaut).
     • column : Colonne de haut en bas.
     • row-reverse et column-reverse : Inversent la direction.
   • flex-wrap : Permet de passer à la ligne si nécessaire.
     • nowrap : par défaut, tous les éléments sur une ligne.
     • wrap : permet d'aller à la ligne.
   • justify-content : Aligne les éléments horizontalement.
     • flex-start, flex-end, center, space-between, space-around.
   • align-items : Aligne les éléments verticalement.
     • flex-start, flex-end, center, stretch (par défaut).
   • align-content : Gestion des espaces verticaux entre les lignes en cas de multi-lignes.

2. Propriétés des éléments enfants

   • order : Change la position d'affichage des éléments.
   • flex-grow, flex-shrink, flex-basis : Gestion de la taille des éléments.
     • flex-grow : Croissance des éléments pour occuper l'espace restant.
     • flex-shrink : Réduction des éléments quand l'espace est insuffisant.
     • flex-basis : Taille de base des éléments avant les calculs de flex-grow et flex-shrink.
   • align-self : Permet d'aligner individuellement chaque élément différemment du groupe.

Exemples concrets

1. Mosaïque d'images

   • Utilisation de display: flex;, flex-wrap et justify-content pour positionner les images.
   • Combinaison de propriétés pour gérer les espaces entre les images.

2. Menu responsive

   • Création d'un menu centré en utilisant display: flex;, align-items: center;, et justify-content: space-around;.
   • Adaptation du menu en fonction de la taille de l'écran avec des media queries.

3. Layout avec Sidebar et Contenu

   • Sidebar de 25% et contenu principal de 75%.
   • Utilisation de display: flex; pour aligner les éléments sur la même hauteur.
   • Utilisation de order pour changer l'ordre des éléments sur différents types d'écrans.

Conclusion

• Les Flexbox permettent de créer des mises en page complexes de manière plus simple et plus flexible que les techniques antérieures.
• Il est possible d'adapter les mises en page très facilement avec Flexbox en fonction des résolutions d'écran.
• Attention au support des anciens navigateurs, utiliser Modernizr pour le support conditionnel.

Flexbox simplifie la gestion des layouts en CSS, surtout pour des cas d'utilisation variés et des alignements dynamiques.