Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Haaste: Sovella Flexbox-käsitteitä | Flexboxin Hallinta Asetteluja Varten
CSS:n Perusteet

bookHaaste: 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 on product-image-luokka) että tuotetiedot (div-elementti, jolla on product-info-luokka).
  • Ota flexbox käyttöön tunnistetussa vanhemmassa elementissä (eli div, jolla on shopping-card-luokka).
  • Kohdista kortin sisällöt pystysuunnassa keskelle.
index.html

index.html

index.css

index.css

copy
  • Lisää display: flex; vanhemman elementin, jolla on luokka shopping-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.html

index.css

index.css

copy
Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 6

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Suggested prompts:

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

bookHaaste: 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 on product-image-luokka) että tuotetiedot (div-elementti, jolla on product-info-luokka).
  • Ota flexbox käyttöön tunnistetussa vanhemmassa elementissä (eli div, jolla on shopping-card-luokka).
  • Kohdista kortin sisällöt pystysuunnassa keskelle.
index.html

index.html

index.css

index.css

copy
  • Lisää display: flex; vanhemman elementin, jolla on luokka shopping-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.html

index.css

index.css

copy
Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 6
some-alt