Haaste: Sovella Flexbox-käsitteitä
Tutustutaan flexboxin tehokkuuteen luomalla kauppakortti, jossa on tuotekuva, kuvaus ja hinta. Oletuksena kaikki elementit ovat pinottuna sarakkeeseen, yksi toisen alle. Tavoitteena on kuitenkin muuttaa tätä käyttäytymistä hyödyntämällä flexboxia.
Tehtävä
Tarkastele seuraavaa HTML-rakennetta:
<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>
Tehtävänä on muokata CSS-tyylejä seuraavasti:
- Tunnista vanhemman elementti, joka sisältää sekä tuotekuvan (
img
-elementti, jolla onproduct-image
-luokka) että tuotetiedot (div
-elementti, jolla onproduct-info
-luokka). - Ota flexbox käyttöön tunnistetussa vanhemmassa elementissä (eli
div
, jolla onshopping-card
-luokka). - Kohdista kortin sisällöt pystysuunnassa keskelle.
index.html
index.css
- Lisää
display: flex;
vanhemman elementin, jolla on luokkashopping-card
, tyyliin. - Oletusarvoinen flex-suunta on rivi (row), joten
flex-direction
-ominaisuuden arvoa ei tarvitse muuttaa. - Kohdistaaksesi kohteet pystysuunnassa keskelle, käytä
align-items: center;
.
index.html
index.css
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you show me the CSS code to apply these flexbox properties?
What will the layout look like after applying these changes?
Can you explain what each flexbox property does in this context?
Awesome!
Completion rate improved to 2.56
Haaste: Sovella Flexbox-käsitteitä
Pyyhkäise näyttääksesi valikon
Tutustutaan flexboxin tehokkuuteen luomalla kauppakortti, jossa on tuotekuva, kuvaus ja hinta. Oletuksena kaikki elementit ovat pinottuna sarakkeeseen, yksi toisen alle. Tavoitteena on kuitenkin muuttaa tätä käyttäytymistä hyödyntämällä flexboxia.
Tehtävä
Tarkastele seuraavaa HTML-rakennetta:
<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>
Tehtävänä on muokata CSS-tyylejä seuraavasti:
- Tunnista vanhemman elementti, joka sisältää sekä tuotekuvan (
img
-elementti, jolla onproduct-image
-luokka) että tuotetiedot (div
-elementti, jolla onproduct-info
-luokka). - Ota flexbox käyttöön tunnistetussa vanhemmassa elementissä (eli
div
, jolla onshopping-card
-luokka). - Kohdista kortin sisällöt pystysuunnassa keskelle.
index.html
index.css
- Lisää
display: flex;
vanhemman elementin, jolla on luokkashopping-card
, tyyliin. - Oletusarvoinen flex-suunta on rivi (row), joten
flex-direction
-ominaisuuden arvoa ei tarvitse muuttaa. - Kohdistaaksesi kohteet pystysuunnassa keskelle, käytä
align-items: center;
.
index.html
index.css
Kiitos palautteestasi!