Flexbox
F
Definition complete
Flexbox (Flexible Box Layout) est un module CSS permettant de creer des mises en page flexibles et responsives en distribuant l'espace entre les elements d'un conteneur. Il simplifie considerablement l'alignement, la distribution et le reordonnancement des elements.
Le modele Flexbox fonctionne sur deux axes : l'axe principal (main axis, horizontal par defaut) et l'axe transversal (cross axis, vertical). Les proprietes du conteneur (display: flex) definissent la direction, l'alignement et la distribution, tandis que les proprietes des items controlent leur croissance et leur ordre.
Les proprietes conteneur essentielles : flex-direction (row, column), justify-content (distribution sur l'axe principal), align-items (alignement sur l'axe transversal), flex-wrap (retour a la ligne), et gap (espacement entre items). Cote items : flex-grow, flex-shrink, flex-basis, et order.
Flexbox excelle pour les layouts unidimensionnels (lignes ou colonnes), les barres de navigation, les cards alignees, et les centrage parfaits. Pour les layouts bidimensionnels complexes (grilles), CSS Grid est souvent plus adapte. Les deux sont complementaires.
Exemples pratiques
- Navigation : display: flex; justify-content: space-between; aligne le logo a gauche et le menu a droite automatiquement.
- Centrage parfait : display: flex; justify-content: center; align-items: center; height: 100vh; centre un element verticalement et horizontalement.
- Cards responsive : flex-wrap: wrap; avec des items flex: 1 1 300px; cree une grille qui s'adapte a toutes les tailles d'ecran.
A quoi sert Flexbox ?
Flexbox est utilise pour les navigations responsives, les layouts de composants (cards, media objects), l'alignement de contenus, les formulaires inline, et tout layout necessitant une distribution flexible de l'espace disponible.
Flexbox en pratique chez 123web
Chez 123web, nous utilisons intensivement Flexbox pour creer des interfaces responsives et maintenables. Combine a CSS Grid pour les structures de page, Flexbox nous permet de construire des layouts flexibles sans les hacks de positionnement d'autrefois.