Principes et Implémentation Pratique
Objectifs
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
Résumé
L'idée derrière les Flexbox est d'arranger, aligner et distribuer l'espace entre les éléments dans un container de manière dynamique, et ceci indépendamment de la taille des éléments.
Description
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.
Questions - réponses
Programme détaillé
Module 1 - Flex
Module 2 - Exercices pratiques
Facebook
Twitter
Linkedin
Email
flex: 1 1 0px;
Et lorsque je supprime cette ligne de code et bien le texte de l'article réapparaît, mais le header ne reste pas figer lorsque je scrolle.
Je ne comprends pas trop d'où pourrais venir le problème. Je tacherais de recommencer pour trouver la solution.
Explications claires