Qu'est-ce que CSS Flexbox ?
CSS Flexbox (Flexible Box Layout) est un modèle de mise en page unidimensionnel qui distribue l'espace entre les éléments d'un conteneur. Il simplifie l'alignement, l'ordre et le dimensionnement des éléments le long d'un axe principal et d'un axe transversal, rendant plus facile de créer des mises en page réactives sans flottants ni hacks de positionnement.
Propriétés clés de Flexbox
- flex-direction : Définit l'axe principal (ligne, colonne, ou leurs inverses).
- flex-wrap : Contrôle si les éléments s'enroulent sur de nouvelles lignes.
- justify-content : Aligne les éléments le long de l'axe principal.
- align-items : Aligne les éléments le long de l'axe transversal.
- gap : Définit l'espacement entre les éléments flexibles sans marges.
Questions fréquemment posées
Quand dois-je utiliser Flexbox par rapport à Grid ?
Utilisez Flexbox pour les mises en page unidimensionnelles (une seule ligne ou colonne d'éléments). Utilisez CSS Grid pour les mises en page bidimensionnelles où vous avez besoin de contrôler à la fois les lignes et les colonnes simultanément.
Flexbox est-il pris en charge dans tous les navigateurs ?
Oui. CSS Flexbox est pris en charge dans tous les navigateurs modernes, notamment Chrome, Firefox, Safari et Edge. Aucun préfixe fournisseur n'est nécessaire pour les implémentations actuelles.