Flexbox ile Kart Düzeni

Bu projede, Flexbox kullanarak basit bir ürün kartı düzeni oluşturacaksınız. Bu alıştırma, display: flex, flex-wrap ve hizalama özelliklerini pratik olarak uygulamanıza yardımcı olacaktır.

Proje Detayları

Bu projede, Flexbox kullanarak basit bir ürün kartı düzeni oluşturacaksınız. Bu alıştırma, display: flex, flex-wrap ve hizalama özelliklerini pratik olarak uygulamanıza yardımcı olacaktır.

Proje Adımları:

  1. Bir HTML dosyası oluşturun ve birkaç ürün kartı için temel yapıyı hazırlayın (resim, başlık, açıklama, fiyat, buton içeren).
  2. Bir CSS dosyası oluşturun ve HTML dosyasına bağlayın.
  3. Kartları içeren bir konteyner elementine display: flex; uygulayın.
  4. Kartların yan yana sığmadığında alt satıra geçmesi için flex-wrap: wrap; özelliğini kullanın.
  5. Kartlar arasında boşluk bırakmak için gap özelliğini veya kartlara margin eklemeyi kullanın.
  6. Kartların yatayda nasıl hizalanacağını (örneğin, justify-content: center; veya space-around;) belirleyin.
  7. Kartların dikeyde nasıl hizalanacağını (align-items) ayarlayın (eğer kart yükseklikleri farklıysa).
  8. Kartların esnek bir şekilde büyümesini veya küçülmesini sağlamak için flex-grow, flex-shrink ve flex-basis (veya flex kısaltması) özelliklerini deneyin.
  9. Media query kullanarak küçük ekranlarda kartların alt alta gelmesini sağlayın (örneğin, flex-direction: column; veya kart genişliğini %100 yaparak).

Başlangıç HTML Kodu:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Kart Düzeni</title>
    <link rel="stylesheet" href="card-layout.css">
</head>
<body>
    <h1>Ürünlerimiz</h1>
    <div class="card-container">
        <div class="project-card">
            <img src="https://via.placeholder.com/300x200?text=Ürün+1" alt="Ürün 1">
            <h4>Ürün 1</h4>
            <p>Bu ürünün kısa açıklaması burada yer alacak.</p>
            <p><strong>Fiyat: 100 TL</strong></p>
            <button>Sepete Ekle</button>
        </div>
        <div class="project-card">
            <img src="https://via.placeholder.com/300x200?text=Ürün+2" alt="Ürün 2">
            <h4>Ürün 2</h4>
            <p>Bu ürünün biraz daha uzun bir açıklaması olabilir.</p>
            <p><strong>Fiyat: 150 TL</strong></p>
            <button>Sepete Ekle</button>
        </div>
        <div class="project-card">
            <img src="https://via.placeholder.com/300x200?text=Ürün+3" alt="Ürün 3">
            <h4>Ürün 3</h4>
            <p>Kısa açıklama.</p>
            <p><strong>Fiyat: 120 TL</strong></p>
            <button>Sepete Ekle</button>
        </div>
        <div class="project-card">
            <img src="https://via.placeholder.com/300x200?text=Ürün+4" alt="Ürün 4">
            <h4>Ürün 4</h4>
            <p>Farklı özelliklere sahip başka bir ürün.</p>
            <p><strong>Fiyat: 200 TL</strong></p>
            <button>Sepete Ekle</button>
        </div>
    </div>
</body>
</html>

Bu HTML dosyasını ve boş bir card-layout.css dosyasını oluşturun, ardından CSS dosyasını yukarıdaki adımlara göre doldurun.