CATALOGUE Code & Data Formation No Code Webflow - Créer la landing Page d'OpenAI Maîtriser le CSS Display pour des Mises en Page Efficaces

Maîtriser le CSS Display pour des Mises en Page Efficaces

Types d'affichage (Display Types)
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Webflow - Créer la landing Page d'OpenAI
Revoir le teaser Je m'abonne
Transcription
Cette leçon fait partie de la formation
49,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
Cette leçon fait partie de la formation
49,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Exploration des Types Principaux de Display

Objectifs

Les objectifs de cette vidéo sont d'enseigner les bases de la propriété CSS display et de montrer comment utiliser les différents types de display pour structurer vos pages Web de manière efficace et flexible grâce à Webflow.

Résumé

Apprenez les bases de la propriété CSS display afin de structurer efficacement vos pages Web. Nous abordons les éléments block, flex, grid et none, ainsi que leurs variantes inline.

Description

La propriété CSS display est un élément crucial pour la structuration des pages Web. Elle permet de définir comment les éléments HTML sont disposés, facilitant ainsi la création de mises en page variées et dynamiques. Cette leçon se concentre sur quatre types principaux de display : block, flex, grid et none. Nous discuterons également des variantes inline telles que inline-block, inline-flex et inline-grid.

Les éléments display block occupent toute la largeur disponible de leur conteneur parent et se disposent verticalement. En créant des éléments de type block dans Webflow, comme des paragraphes ou des titres, vous remarquez qu'ils s'étendent pour occuper toute la largeur disponible.

L'outil display flex, ou flexbox, permet de créer des layouts dynamiques qui ajustent la disposition des éléments en fonction de l'espace disponible. Il est idéal pour aligner et justifier les éléments horizontalement ou verticalement.

Le display grid crée des mises en page structurées avec des lignes et des colonnes définies, permettant une disposition précise des éléments dans leurs cellules respectives.

Le display none retire complètement un élément du flux de la page, rendant cet élément invisible et non rendu.

Enfin, les éléments inline sont disposés comme du texte, dans le flux de ligne, et ne peuvent pas avoir de dimensions personnalisées, contrairement aux éléments inline-block, inline-flex et inline-grid qui combinent les propriétés des display block et flex/grid.

Voir plus

Questions - réponses

Quelle est la caractéristique principale d'un élément avec display block ?
Les éléments avec display block prennent toute la largeur disponible de leur conteneur parent et se disposent verticalement.
Comment le display flex facilite-t-il la création de layouts dynamiques ?
Display flex permet d'ajuster la disposition des éléments en fonction de l'espace disponible, et il facilite leur alignement et justification horizontalement ou verticalement.
Quel est le comportement d'un élément avec display none ?
Un élément avec display none est complètement retiré du flux de la page, rendant cet élément invisible et non rendu.