Flexbox en CSS

Jun 20, 2024

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.