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. Profesyonel bir yazılım geliştiricisi olarak, özellikle PHP tabanlı web projeleri geliştirme konusunda uzmanlaşmış durumdayım. Yazılım dünyasındaki yolculuğuma, yaratıcı çözümler üreterek ve kullanıcı odaklı projeler geliştirerek devam ediyorum.Blog sitemde yazılım ve teknolojiye dair güncel bilgileri, yenilikleri ve ipuçlarını paylaşıyorum. Amacım, yazılım dünyasına ilgi duyan herkese faydalı içerikler sunarak bilgi birikimimi paylaşmak ve sektörel gelişmelere ışık tutmak.PHP’nin yanı sıra, React, Bootstrap, Tailwind, Jquery gibi modern araçları kullanarak dinamik, kullanıcı dostu ve performanslı web siteleri geliştirme üzerine çalışıyorum. Ayrıca, öğretmenlere ve öğrencilere yönelik inovatif projeler geliştirme konusundaki tutkum sayesinde, eğitim ve yazılımı birleştiren projeler üretmeyi hedefliyorum.Eğer siz de yazılım ve teknoloji konularına ilgi duyuyorsanız, bloğumda sizin için ilham kaynağı olabilecek içerikler bulabilirsiniz.