Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Créer une Mise en Page avec Flexbox | Maîtriser Flexbox pour les Mises en Page
Fondamentaux De CSS

bookDéfi : Créer une Mise en Page avec Flexbox

Tâche

Création d'une carte de blog. Modification du comportement de positionnement par défaut à l'aide de flex.

La tâche consiste à :

  • Identifier l’élément parent contenant à la fois l’image de l’article (img avec la classe post-image) et les informations de l’article (div avec la classe post-info).
  • Appliquer les propriétés flex à l’élément parent (div avec la classe blog-card).
  • Centrer horizontalement les éléments à l’intérieur de la carte.
  • S’assurer que les éléments occupent toute la hauteur de la carte.
index.html

index.html

index.css

index.css

copy
  • display: flex; ne peut être appliqué qu'à l'élément parent.
  • La direction flex par défaut est row, il faut donc la modifier avec la propriété flex-direction: column;.
  • Pour centrer les éléments horizontalement, utiliser align-items: center;.
  • Pour espacer les éléments verticalement, utiliser justify-content: space-between;.
index.html

index.html

index.css

index.css

copy
Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 7

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Suggested prompts:

Can you show me the HTML structure for the blog card?

What CSS should I add to the `.blog-card` class to achieve the desired layout?

Can you explain the difference between `align-items` and `justify-content` in this context?

Awesome!

Completion rate improved to 2.56

bookDéfi : Créer une Mise en Page avec Flexbox

Glissez pour afficher le menu

Tâche

Création d'une carte de blog. Modification du comportement de positionnement par défaut à l'aide de flex.

La tâche consiste à :

  • Identifier l’élément parent contenant à la fois l’image de l’article (img avec la classe post-image) et les informations de l’article (div avec la classe post-info).
  • Appliquer les propriétés flex à l’élément parent (div avec la classe blog-card).
  • Centrer horizontalement les éléments à l’intérieur de la carte.
  • S’assurer que les éléments occupent toute la hauteur de la carte.
index.html

index.html

index.css

index.css

copy
  • display: flex; ne peut être appliqué qu'à l'élément parent.
  • La direction flex par défaut est row, il faut donc la modifier avec la propriété flex-direction: column;.
  • Pour centrer les éléments horizontalement, utiliser align-items: center;.
  • Pour espacer les éléments verticalement, utiliser justify-content: space-between;.
index.html

index.html

index.css

index.css

copy
Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 7
some-alt