Flex
Détails de la leçon
Description de la leçon
Les Flexbox, ou Flexible Box Layout, offrent une méthode pour arranger, aligner et distribuer l'espace entre les éléments au sein d'un container. Même si la taille des éléments est inconnue ou dynamique, les Flexbox permettent une adaptation fluide et flexible à la taille de l'écran ou du support.
Contrairement aux méthodes traditionnelles comme display block (orientation verticale) et display inline (orientation horizontale), le display flex ne prend pas en compte les directions à la base. Un container flex s'adapte pour remplir l'espace disponible ou pour éviter l'overflow.
Vous pouvez commencer à développer avec Flexbox à partir d'Internet Explorer 10, bien que le support ne soit que partiel et nécessite l'usage de préfixes spécifiques. Pour faciliter l'usage des Flexbox, le plugin autoprefixer sous Sublime Text est recommandé. Ce plugin permet d'ajouter automatiquement les préfixes nécessaires pour une compatibilité optimale.
Objectifs de cette leçon
L'objectif de cette vidéo est de :
- Comprendre les concepts de base des Flexbox
- Savoir comment utiliser les Flexbox pour aligner et distribuer les éléments
- Apprendre à utiliser les préfixes pour assurer la compatibilité inter-navigateurs
Prérequis pour cette leçon
Avant de suivre cette vidéo, il est nécessaire d'avoir des connaissances de base en HTML et CSS.
Métiers concernés
Les compétences en Flexbox sont particulièrement utiles pour les :
- Développeurs Front-End
- Designers Web
- Intégrateurs Web
Alternatives et ressources
En plus de Flexbox, vous pouvez également utiliser CSS Grid pour la mise en page dynamique, qui offre plus de souplesse pour les mises en page complexes.
Questions & Réponses
Je m'abonne