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

bookDéfi : Appliquer les Concepts Flexbox

Explorons la puissance de Flexbox en créant une carte de boutique avec une image de produit, une description et le prix. Par défaut, tous les éléments sont empilés en colonne, les uns sous les autres. Cependant, notre objectif est de modifier ce comportement à l'aide de Flexbox.

Tâche

Considérez la structure HTML suivante :

<div class="shopping-card">
  <img src="link-to-image" alt="Analytics Machine" class="product-image" />
  <div class="product-info">
    <h3 class="product-title">Analytics Machine</h3>
    <p class="product-description">Bio Innovation</p>
    <div class="product-price">$10.00</div>
    <button class="add-to-cart">Add to Cart</button>
  </div>
</div>

La tâche consiste à modifier le CSS pour atteindre les objectifs suivants :

  • Identifier l’élément parent contenant à la fois l’image du produit (balise img avec la classe product-image) et les informations du produit (balise div avec la classe product-info).
  • Appliquer Flexbox à l’élément parent identifié (la balise div avec la classe shopping-card).
  • Centrer verticalement les éléments à l’intérieur de la carte de boutique.
index.html

index.html

index.css

index.css

copy
  • Appliquer display: flex; à l’élément parent avec la classe shopping-card.
  • La direction de flexion par défaut est row, il n’est donc pas nécessaire de modifier la valeur de la propriété flex-direction.
  • Pour centrer les éléments verticalement, utiliser align-items: center;.
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 6

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

Awesome!

Completion rate improved to 2.56

bookDéfi : Appliquer les Concepts Flexbox

Glissez pour afficher le menu

Explorons la puissance de Flexbox en créant une carte de boutique avec une image de produit, une description et le prix. Par défaut, tous les éléments sont empilés en colonne, les uns sous les autres. Cependant, notre objectif est de modifier ce comportement à l'aide de Flexbox.

Tâche

Considérez la structure HTML suivante :

<div class="shopping-card">
  <img src="link-to-image" alt="Analytics Machine" class="product-image" />
  <div class="product-info">
    <h3 class="product-title">Analytics Machine</h3>
    <p class="product-description">Bio Innovation</p>
    <div class="product-price">$10.00</div>
    <button class="add-to-cart">Add to Cart</button>
  </div>
</div>

La tâche consiste à modifier le CSS pour atteindre les objectifs suivants :

  • Identifier l’élément parent contenant à la fois l’image du produit (balise img avec la classe product-image) et les informations du produit (balise div avec la classe product-info).
  • Appliquer Flexbox à l’élément parent identifié (la balise div avec la classe shopping-card).
  • Centrer verticalement les éléments à l’intérieur de la carte de boutique.
index.html

index.html

index.css

index.css

copy
  • Appliquer display: flex; à l’élément parent avec la classe shopping-card.
  • La direction de flexion par défaut est row, il n’est donc pas nécessaire de modifier la valeur de la propriété flex-direction.
  • Pour centrer les éléments verticalement, utiliser align-items: center;.
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 6
some-alt