Dé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 classeproduct-image
) et les informations du produit (balisediv
avec la classeproduct-info
). - Appliquer Flexbox à l’élément parent identifié (la balise
div
avec la classeshopping-card
). - Centrer verticalement les éléments à l’intérieur de la carte de boutique.
index.html
index.css
- Appliquer
display: flex;
à l’élément parent avec la classeshopping-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.css
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
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
Dé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 classeproduct-image
) et les informations du produit (balisediv
avec la classeproduct-info
). - Appliquer Flexbox à l’élément parent identifié (la balise
div
avec la classeshopping-card
). - Centrer verticalement les éléments à l’intérieur de la carte de boutique.
index.html
index.css
- Appliquer
display: flex;
à l’élément parent avec la classeshopping-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.css
Merci pour vos commentaires !