Introduction à Flexbox pour le Layout
Objectifs
À l'issue de cette vidéo, vous serez capable de :
- Utiliser Flexbox pour structurer une page web.
- Employer les propriétés
flexetorderpour ajuster l'apparence des éléments. - Créer des layouts responsive qui s'adaptent aux différentes tailles d'écran.
Résumé
Apprenez à organiser et structurer le layout d'une page web en utilisant Flexbox, une technique CSS puissante pour le design responsive.
Description
Dans cette leçon, découvrez comment utiliser Flexbox pour organiser et agencer le layout complet d'une page web. En partant d'un fichier HTML de base, nous allons voir comment définir des divs pour le container, le header, le footer, l'article et les asides. Vous apprendrez à appliquer les propriétés display: flex et flex-flow: row wrap pour structurer ces éléments. Nous illustrerons également l'utilisation des propriétés CSS essentielles tels que flex-grow, order, et les media queries pour adapter le layout aux différentes tailles d'écran.
Nous allons mettre en pratique un design mobile first, en spécifiant des propriétés pour les périphériques de petite taille, puis en adaptant le design pour des écrans plus larges. Chaque étape sera minutieusement expliquée pour vous permettre de visualiser l'effet en temps réel sur votre navigateur. Cette leçon détaillera également la manipulation des éléments pour obtenir une disposition souhaitée, en ajustant la largeur et l'ordre des éléments à l'aide de Flexbox.
Questions fréquentes
flex-grow indique la capacité d'un élément flex à croître par rapport aux autres éléments flexibles à l'intérieur du même container.
Programme détaillé
Module 1 - Flex
Module 2 - Exercices pratiques
Par contre je suis déçu qu’aucun exemple incluant la gestion des images ne soit donné pour qu’elles se redimensionnent automatiquement.
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