CATALOGUE Code & Data Formation ReactJS Apprendre ReactJS 2018 Maitriser les mises en page CSS avec Flexbox

Maitriser les mises en page CSS avec Flexbox

Mettre en forme ses composants
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre ReactJS 2018
Revoir le teaser Je m'abonne
3,0
Transcription

49,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
3,0
49,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

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.

Apprenez à agencer des éléments HTML côte à côte et en colonne en utilisant Flexbox en CSS.

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.

Voir plus
Questions réponses
Qu'est-ce que Flexbox en CSS ?
Flexbox est un module CSS conçu pour fournir un moyen plus efficace de créer des mises en page flexibles, facilitant l'alignement et la distribution des éléments dans un conteneur, même lorsqu'ils ont des tailles inconnues ou dynamiques.
Comment change-t-on la direction des éléments avec Flexbox ?
On change la direction des éléments avec Flexbox en utilisant la propriété flex-direction, qui peut être définie sur 'row' pour disposition en ligne ou 'column' pour disposition en colonne.
Quel est l'avantage principal de l'utilisation de Flexbox ?
L'avantage principal de l'utilisation de Flexbox est sa capacité à gérer les mises en page complexes de manière plus simple et intuitive, en permettant un alignement flexibles des éléments et un espace de distribution, sans nécessiter de flottaison ou de positionnement manuel.
1 commentaire
3,0
1 vote
5
4
3
2
1
gregory_jarrige
Il y a 3 ans
Cette formation est géniale, mais je ne peux pas lui mettre la note maximale en l'état, car il y a deux problèmes qu'il faudrait signaler à l'auteur :
- 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.
charlene.bleuse_1
Il y a 3 ans

En réponse à par gregory_jarrige

Bonjour Monsieur Jarrige,

Je vous remercie de votre retour, je fais part de vos remarques au service technique.
Bien à vous, Charlène