CSS Flexbox ile Grid arasındaki fark nedir?

CSS Flexbox , tek boyutlu (satır veya sütun) hizalamalar için idealdir ve elemanları dinamik olarak sıralar. CSS Grid ise iki boyutlu (hem satır hem sütun) yerleşim düzeni sağlar. Eğer sadece görselleri yatay veya dikey olarak hizalamak istiyorsanız, CSS Flexbox kullanmak daha pratiktir.

CSS Flexbox kullanarak neden display: grid yerine display: flex kullanmalıyım?

Eğer resimleri yatay veya dikey olarak hizalamak ve ekran boyutuna göre düzenlenmesini sağlamak istiyorsanız, CSS Flexbox daha esnektir. Grid , tam olarak satır ve sütun bazlı bir yapı oluşturduğu için, her elemanı kesin bir alana yerleştirmenizi gerektirir. Ancak Flexbox , elemanları içeriğe göre otomatik hizalar.

CSS Flexbox ile resimler neden eşit boyutta olmuyor?

Eğer görselleriniz farklı oranlara sahipse, CSS Flexbox onları varsayılan boyutlarında yerleştirir. Bunu engellemek için şu CSS kodlarını kullanabilirsiniz: .gallery img { width: 100%; height: 200px; object-fit: cover; } Bu kodlar, tüm görsellerin aynı yükseklikte ve uyumlu şekilde görüntülenmesini sağlar.

CSS Flexbox ile galeride resimleri nasıl ortalarım?

Flexbox kullanarak resimleri ortalamak için justify-content ve align-items özelliklerini kullanabilirsiniz.

Galeride resimlerin arasına nasıl boşluk ekleyebilirim?

Flexbox içindeki elemanlar arasına boşluk eklemek için gap özelliğini kullanabilirsiniz.

CSS Flexbox İle Responsive Foto Galeri Nasıl Yapılır?

İçindekiler

Web sitenize şık ve işlevsel bir foto galeri eklemek istiyorsanız, CSS Flexbox kullanarak duyarlı (responsive) bir tasarım oluşturabilirsiniz. Bu yazıda, CSS Flexbox ile gelişmiş bir foto galeri oluşturmayı adım adım anlatacağız. Mobil uyumluluk, performans optimizasyonu ve ekstra geliştirme ipuçlarını da paylaşacağız.

1. CSS Flexbox ile Galerinin Genel Yapısı

Bu galeride, her bir görselin üzerine gelindiğinde büyüme efekti olacak ve bir overlay (kaplama) ile resmin adı gösterilecektir. CSS Flexbox sayesinde düzenli ve uyumlu bir görünüm elde edilecek ve media queries ile mobil cihazlara uyum sağlanacaktır.

Kullanılacak Teknolojiler:

HTML: Sayfa yapısını oluşturur.
CSS Flexbox: Görsellerin hizalanmasını ve düzenlenmesini sağlar.
CSS Transition: Hover efekti gibi yumuşak geçişler için kullanılır.
Responsive Design: Farklı ekran boyutlarına uyum sağlar.
Media Queries: Mobil cihazlar için özel CSS kuralları belirler.

2. HTML Yapısı

Aşağıda Flexbox kullanarak bir foto galeri oluşturacak HTML kodunu görebilirsiniz:

<section class="gallery-container">
    <h2>Foto Galeri</h2>
    <p>CSS Flexbox ile şık ve modern bir galeri</p>
    <div class="gallery">
        <div class="gallery-item">
            <img src="image1.jpg" alt="Resim 1">
            <div class="overlay">Resim 1</div>
        </div>
        <div class="gallery-item">
            <img src="image2.jpg" alt="Resim 2">
            <div class="overlay">Resim 2</div>
        </div>
    </div>
</section>

Burada .gallery-container tüm galeriyi kapsarken, .gallery içindeki görselleri sıralamak için kullanılır. Flexbox sayesinde elemanlar düzenli bir şekilde hizalanacaktır.

3. Stillerin Eklenmesi

Flexbox ile galerinin düzenini oluşturup, geçiş efektleri ekleyelim:

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.1);
}

.overlay {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    width: 100%;
    text-align: center;
    padding: 5px 0;
}

4. Mobil Uyum

Mobil uyumluluk için media queries kullanarak Flexbox özelliklerini güncelleyelim:

@media (max-width: 768px) {
    .gallery {
        flex-direction: column;
    }
}

Bu sayede CSS Flexbox, 768 pikselden küçük ekranlarda görselleri dikey olarak sıralayacaktır.

5. Ekstra Geliştirme Fikirleri

Galerinizi daha işlevsel hale getirmek için şu özellikleri ekleyebilirsiniz:

Lightbox (Büyütülmüş Görünüm): Kullanıcılar bir resme tıkladığında büyük boyutlu versiyonunu açabilirsiniz.
Filtreleme Sistemi: Kullanıcıların belirli kategorilere göre resimleri filtreleyebilmesini sağlayabilirsiniz.
Slayt Modu: Resimler otomatik olarak belirli aralıklarla değişerek dinamik bir görünüm sunabilir.

Bu yöntemle, CSS Flexbox ile modern ve şık bir responsive foto galeri oluşturabilirsiniz. Kendi ihtiyaçlarınıza göre kodu geliştirebilir ve farklı efektler ekleyebilirsiniz. Daha fazla örnek için “Kod Atölyesi” kategorisine bakabilirsin. Ayrıca w3schools adresine de bakabilirsin.

index.html

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anılarla Dolu Bir Galeri</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
    
</head>

<body>
    <div class="container">
        <h1> Anılarla Dolu Bir Galeri</h1>
        <p class="text">Hayatın en güzel anlarını yakaladığımız karelerle dolu galerimize hoş geldiniz! Burada doğadan
            ilham alan görüntülerden, özel anılarımıza kadar birçok fotoğrafı bulabilirsiniz. Keyifli keşifler dileriz!
            🌿✨</p>
        <div class="gallery">
            <div class="gallery-item">
                <img src="https://picsum.photos/id/317/200/200" alt="Resim 1">
                <div class="overlay">Resim 1</div>
            </div>
            <div class="gallery-item">
                <img src="https://picsum.photos/id/327/200/200" alt="Resim 2">
                <div class="overlay">Resim 2</div>
            </div>
            <div class="gallery-item">
                <img src="https://picsum.photos/id/337/200/200" alt="Resim 3">
                <div class="overlay">Resim 3</div>
            </div>
            <div class="gallery-item">
                <img src="https://picsum.photos/id/347/200/200" alt="Resim 4">
                <div class="overlay">Resim 4</div>
            </div>
            <div class="gallery-item">
                <img src="https://picsum.photos/id/357/200/200" alt="Resim 5">
                <div class="overlay">Resim 5</div>
            </div>
            <div class="gallery-item">
                <img src="https://picsum.photos/id/367/200/200" alt="Resim 6">
                <div class="overlay">Resim 6</div>
            </div>
            <div class="gallery-item">
                <img src="https://picsum.photos/id/377/200/200" alt="Resim 7">
                <div class="overlay">Resim 7</div>
            </div>
            <div class="gallery-item">
                <img src="https://picsum.photos/id/387/200/200" alt="Resim 8">
                <div class="overlay">Resim 8</div>
            </div>
            <div class="gallery-item">
                <img src="https://picsum.photos/id/397/200/200" alt="Resim 9">
                <div class="overlay">Resim 9</div>
            </div>
        </div>
    </div>
</body>
</html>

style.css

 * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Lato', sans-serif;
            background-color: #f4f4f4;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }

        h1 {
            margin-bottom: 30px;
        }

        .text {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
            margin-bottom: 30px;
        }

        .gallery {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
        }

        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .gallery img {
            width: 100%;
            max-width: 350px;
            display: block;
            transition: transform 0.3s ease-in-out;
        }

        .gallery-item:hover img {
            transform: scale(1.1);
        }

        .gallery-item .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .gallery-item:hover .overlay {
            opacity: 1;
        }

        @media (max-width: 768px) {
            .gallery {
                flex-direction: column;
                align-items: center;
            }
        }

CSS Flexbox ile Grid arasındaki fark nedir?

CSS Flexbox, tek boyutlu (satır veya sütun) hizalamalar için idealdir ve elemanları dinamik olarak sıralar. CSS Grid ise iki boyutlu (hem satır hem sütun) yerleşim düzeni sağlar. Eğer sadece görselleri yatay veya dikey olarak hizalamak istiyorsanız, CSS Flexbox kullanmak daha pratiktir.
CSS Flexbox kullanarak neden display: grid yerine display: flex kullanmalıyım?

Eğer resimleri yatay veya dikey olarak hizalamak ve ekran boyutuna göre düzenlenmesini sağlamak istiyorsanız, CSS Flexbox daha esnektir. Grid, tam olarak satır ve sütun bazlı bir yapı oluşturduğu için, her elemanı kesin bir alana yerleştirmenizi gerektirir. Ancak Flexbox, elemanları içeriğe göre otomatik hizalar.
CSS Flexbox ile resimler neden eşit boyutta olmuyor?

Eğer görselleriniz farklı oranlara sahipse, CSS Flexbox onları varsayılan boyutlarında yerleştirir. Bunu engellemek için şu CSS kodlarını kullanabilirsiniz:
.gallery img { width: 100%; height: 200px; object-fit: cover; }
Bu kodlar, tüm görsellerin aynı yükseklikte ve uyumlu şekilde görüntülenmesini sağlar.
CSS Flexbox ile galeride resimleri nasıl ortalarım?

Flexbox kullanarak resimleri ortalamak için justify-content ve align-items özelliklerini kullanabilirsiniz.
Galeride resimlerin arasına nasıl boşluk ekleyebilirim?

Flexbox içindeki elemanlar arasına boşluk eklemek için gap özelliğini kullanabilirsiniz.

Etiketler: CSS Flexbox Responsive Galeri

Paylaş:

Tayyip Bölük

Merhaba! Ben Tayyip Bölük, yazılım geliştirme alanında uzmanlaşmış bir geliştiriciyim. Teknoloji ve yazılım dünyasına olan ilgim, beni bu blogu oluşturmaya yönlendirdi. Amacım, yazılım geliştirme sürecindeki deneyimlerimi, öğrendiklerimi ve sektördeki yenilikleri okuyucularımla paylaşmak. Yazılım geliştirme sürecindeki yenilikçi yaklaşımlar, uygulama geliştirme ipuçları ve teknoloji trendleri üzerine içerikler üretiyorum. Blogumda ayrıca kendi projelerimden ve sektördeki ilham verici hikayelerden de bahsediyorum. Bu blog, hem yazılım meraklıları hem de sektöre adım atmak isteyenler için bir bilgi ve ilham kaynağı olmayı hedefliyor.