CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Introduction à Flexbox: Positionnement d'éléments en CSS

Introduction à Flexbox: Positionnement d'éléments en CSS

Exemple de positionnement
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription
Cette leçon fait partie de la formation
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
Cette leçon fait partie de la formation
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Mise en place de Flexbox pour des boîtes d'articles

Objectifs

Les objectifs de cette vidéo sont de montrer comment structurer des éléments en utilisant Flexbox, ajuster les espacements, et modifier les largeurs des éléments pour obtenir des mises en page variées et harmonieuses.

Résumé

Cette leçon vous montre comment utiliser Flexbox en CSS pour positionner des éléments de manière efficace et intuitive sur une page web.

Description

Dans cette leçon, nous explorons l'utilisation de Flexbox en CSS pour positionner des blocs d'articles. Nous commençons par définir une boîte contenant plusieurs articles et appliquons la propriété display: flex;. En un clin d'œil, les articles s'alignent horizontalement. Nous comparons cette méthode avec l'ancienne approche utilisant float, soulignant la simplification apportée par Flexbox. Ensuite, nous abordons l'ajustement des espacements entre les articles à l'aide de la propriété margin-right et l'utilisation des pseudo-classes :last-child pour annuler les marges superflues. Nous démontrons également comment attribuer des largeurs spécifiques aux articles pour obtenir des mises en page plus variées, en utilisant first-child et last-child. Enfin, nous discutons des méthodes alternatives comme l'utilisation de classes pour définir des tailles, et nous concluons avec une mise en pratique de ces concepts. Cette leçon offre une compréhension complète et approfondie de l'utilisation de Flexbox pour structurer vos éléments HTML de manière moderne et flexible.

Voir plus

Questions fréquentes

Quelle est la principale propriété CSS utilisée pour activer Flexbox sur un conteneur?
La principale propriété CSS est display: flex;.
Comment on peut annuler l'espace à droite du dernier élément dans un conteneur Flexbox?
On peut annuler l'espace en utilisant la pseudo-classe :last-child et en définissant margin-right: 0;.
Pourquoi Flexbox est-il préféré par rapport à l'utilisation de float pour la mise en page?
Flexbox simplifie la mise en page en permettant d'aligner facilement les éléments et de contrôler les espacements sans les complications associées à float.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 1 an
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 2 ans
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 ans
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 4 ans
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !