Utiliser Flexbox pour une mise en page flexible
Objectifs
Les objectifs de cette vidéo sont d'enseigner l'utilisation de Flexbox pour agencer les éléments HTML de façon réactive, et de comprendre l'application des propriétés flex-direction
et flex-wrap
.
Résumé
Apprenez à agencer des éléments HTML côte à côte et en colonne en utilisant Flexbox en CSS.
Description
Dans cette leçon, nous explorons l'utilisation de Flexbox pour créer des mises en page flexibles et réactives à l'aide de CSS. La première étape consiste à ouvrir le fichier CSS et cibler les éléments nécessaires. Nous utilisons la propriété flex-direction
pour aligner les éléments en ligne (row) et en colonne. Nous ajustons ensuite la hauteur de l'image et ajoutons des bordures et des espacements (padding) pour une meilleure esthétique.
Les données métas seront affichées en colonne grâce à flex-direction: column
, ce qui permet de positionner le titre et l'année l'un en dessous de l'autre. Des marges (margin-left et margin-bottom) sont appliquées pour éviter que les éléments ne se chevauchent et pour améliorer la lisibilité. Enfin, le conteneur global utilise flex-wrap
pour s'assurer que les éléments passent à la ligne une fois l'espace de l'écran complété, offrant ainsi une disposition fluide des éléments.
Cet apprentissage est essentiel pour tout développeur web souhaitant améliorer ses compétences en mise en page CSS moderne.
Questions fréquentes
flex-direction
, qui peut être définie sur 'row' pour disposition en ligne ou 'column' pour disposition en colonne.
- la vidéo du chapitre 4.1 ne correspond pas à l'intitulé
- la vidéo du chapitre 6.3 ne correspond pas non plus à l'intitulé
Les deux vidéos erronées correspondent manifestement à un autre cours décrivant la création d'une TODO List.
En réponse à (sans sujet) par gregory_jarrige
Je vous remercie de votre retour, je fais part de vos remarques au service technique.
Bien à vous, Charlène