CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Styliser et Positionner des Éléments avec Flexbox

Styliser et Positionner des Éléments avec Flexbox

Positionez les éléments principaux de la page
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
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Introduction à l'Utilisation des Grilles et Flexbox

Objectifs

Les objectifs de cette vidéo sont de vous apprendre à :

  • Utiliser des grilles pour organiser une page web.
  • Employer flexbox pour positionner et aligner des éléments.
  • Créer des classes CSS pour la mise en page.

Résumé

Découvrez comment utiliser les grilles et le layout flexbox pour positionner vos éléments web de manière efficace.

Description

Avant de commencer à styliser l'entête de votre site et les images, il est crucial de positionner correctement les éléments sur la page. Utiliser des grilles et des blocs alignés facilite cette tâche. Les web designers emploient aujourd'hui des grilles et des gabarits de montage, similaires au print, pour garantir une bonne répartition et homogénéité des éléments, souvent en utilisant des structures à colonnes multiples, comme les grilles de 12 colonnes.

En appliquant un layout flexbox, vos blocs s'aligneront automatiquement selon les directives définies dans le CSS, permettant une répartition uniforme et centrée des éléments. On peut utiliser des classes pour déterminer les tailles des blocs et des gouttières afin d'assurer le bon espacement entre les sections.

Cette leçon détaillera comment configurer ces éléments dans votre fichier CSS, comment utiliser les propriétés flex et créer des zones multi-lignes pour les images et contenu supplémentaire, garantissant une mise en forme rapide et efficace avant de passer aux détails de stylisation.

Voir plus

Questions - réponses

Pourquoi est-il important de positionner les éléments avant de les styliser ?
Positionner les éléments en premier permet de garantir une mise en page homogène et efficace, réduisant ainsi le temps et les efforts nécessaires pour styliser chaque bloc individuellement.
Quels sont les avantages d'utiliser une grille de 12 colonnes ?
Une grille de 12 colonnes offre une grande flexibilité dans la répartition des éléments, permettant de créer des mises en page variées et équilibrées en utilisant des combinaisons multiples de colonnes.
Que fait la propriété flex-wrap en flexbox ?
La propriété flex-wrap permet de contrôler le comportement des éléments lorsque l'espace est insuffisant. Elle permet aux éléments de revenir à la ligne, créant ainsi des lignes multiples.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 4 months
Commentaire
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 1 year
Commentaire
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 years
Commentaire
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 3 years
Commentaire
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !