CSS Flexbox: Esnek ve Duyarlı Tasarımlar İçin Kapsamlı Rehber

Tayyip Bölük Şubat 22, 2025 CSS
CSS Flexbox

CSS Flexbox Nedir?

CSS Flexbox, daha esnek, duyarlı ve kolay hizalanabilir düzenler oluşturmak için kullanılan bir CSS özelliğidir. Özellikle merkezleme, boşluk ayarlama, dikey hizalama gibi işlemleri kolaylaştırır.

Önceden float, position, inline-block gibi yöntemler kullanılıyordu ama bunlar karmaşıktı. CSS flexbox ile bu işlemler çok basit hale geldi!

Flex Container ve Flex İtems

Flexbox iki ana unsurdan oluşur:

  1. Flex Container: İçindeki öğeleri yönlendiren kapsayıcı.
  2. Flex Items: Kapsayıcının içindeki esnek öğeler.

İlk adım olarak, display: flex; özelliğini kullanarak bir flex container oluşturalım.

Basit Bir CSS Flexbox Yapısı

Önce bir HTML dosyası oluşturalım:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox</title>

    <style>
        .container {
            display: flex;
            background-color: lightgray;
            padding: 10px;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: dodgerblue;
            color: white;
            text-align: center;
            line-height: 100px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="container ">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
</body>
</html>

 Ne yaptık?

  • .container div’ini display: flex; ile flex container yaptık.
  • .container içine 3 tane .kutu koyduk (bunlar flex items oldu).
  • Flexbox sayesinde kutular yan yana sıralandı.

Bu kodu tarayıcıda açınca kutuların yan yana hizalandığını göreceksin.

Ana Eksen ve Yönlendirme (flex-direction)

Varsayılan olarak ana eksen (main axis) yataydır, yani öğeler soldan sağa dizilir.

Eğer alt alta sıralamak istersek flex-direction kullanırız:

.container {
    display: flex;
    flex-direction: column;
}

Kutuları Alt Alta Getirme

.container {
    display: flex;
    flex-direction: column; /* Ana ekseni dikey yap */
}

Özet:

  • row → (Varsayılan) Yan yana hizalar
  • column → Alt alta hizalar
  • row-reverse → Sağdan sola hizalar
  • column-reverse → Aşağıdan yukarı hizalar

Bunları kodda deneyerek farkı görebilirsin!

Öğeleri Yatay Hizalama (justify-content)

Eğer öğeleri ana eksende hizalamak istiyorsak justify-content özelliğini kullanırız.

Önemli justify-content Değerleri:

DeğerAçıklama
flex-startVarsayılan, sola hizalar
flex-endSağa hizalar
centerOrtalar
space-betweenİlk ve son öğeyi kenarlara yaslar, ortadakileri eşit boşluk bırakır
space-aroundTüm öğelerin etrafına eşit boşluk bırakır
space-evenlyÖğeleri tamamen eşit aralıklarla dağıtır

İçerikleri Ortalamak

Kutuları ortaya almak için justify-content: center; kullanıyoruz.

.container {
    display: flex;
    justify-content: center;
}

Kenarlara Yaymak

Kutuları kenarlara yaymak için space-between kullanıyoruz.

.container {
    display: flex;
    justify-content: space-between;
}

Öğeleri Dikey Hizalama (align-items)

Eğer öğeleri dikey eksende hizalamak istiyorsak align-items kullanırız.

 Önemli align-items Değerleri:

DeğerAçıklama
flex-startÜste hizalar
flex-endAlta hizalar
centerOrtalar
stretchVarsayılan, öğeler boşluğu doldurur
baselineÖğeleri yazıların alt çizgisine göre hizalar

Öğeleri Dikey Ortalamak

Kutuları dikeyde ortaya almak için:

.container{
    display: flex;
    height: 300px;
    align-items: center;
}

Üste Hizalama

.container{
    display: flex;
    height: 300px;
    align-items: flex-start;
}

Alta Hizalama

.container{
    display: flex;
    height: 300px;
    align-items: flex-end;
}

Taşma Önleme (flex-wrap)

Varsayılan olarak CSS Flexbox içindeki öğeler tek satırda kalır ve taşarsa sıkışır. Eğer bir satır dolduğunda alt satıra geçmelerini istiyorsak flex-wrap kullanırız.

Flex Wrap Kullanımı

.container{
    display: flex;
    flex-wrap: wrap;
}

Önemli flex-wrap Değerleri:

DeğerAçıklama
nowrapVarsayılan, tüm öğeler tek satırda kalır
wrapSığmazsa alt satıra geçer
wrap-reverseAlt satırdan yukarı doğru sıralar

Wrap Kullanımı:

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
</div>

.container {
    display: flex;
    flex-wrap: wrap;
    width: 300px;
}

.box {
    width: 100px;
    height: 100px;
    background: dodgerblue;
    margin: 5px;
    text-align: center;
    color: white;
    line-height: 100px;
}

Etkisi: Eğer .container genişliği 300px olursa, 3 kutu yan yana gelir ve diğerleri alt satıra geçer.

Çoklu Satır Hizalama (align-content)

Eğer flex-wrap: wrap; kullanıyorsak, birden fazla satır olabilir. align-content, satırlar arasındaki boşlukları ayarlamak için kullanılır.

align-content Kullanımı

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    height: 300px;
}

Önemli align-content Değerleri:

DeğerAçıklama
flex-startÜste hizalar
flex-endAlta hizalar
centerOrtalar
space-betweenİlk ve son satırı kenarlara yaslar, ortadakileri eşit boşluk bırakır
space-aroundTüm satırların etrafına eşit boşluk bırakır
stretchVarsayılan, satırları tam boşluğa yayar

Not: align-content sadece birden fazla satır olduğunda çalışır.

Öğelerin Esnekliği (flex-grow, flex-shrink, flex-basis)

CSS Flexbox’ın en güçlü yanlarından biri öğelerin boyutlarını dinamik olarak ayarlayabilmesidir. Bunu 3 özellik ile yaparız:

flex-grow: Öğelerin Genişleme Oranı

Bir öğenin diğerlerine göre ne kadar büyüyeceğini belirler.

İkinci Kutu Diğerlerinden 2 Kat Daha Büyük Olsun

.container{
    display: flex;
}

.box {
    flex-grow: 1;
}

.box:nth-child(2) {
    flex-grow: 2;
}

Sonuç:

  • 1. ve 3. kutular eşit büyüklükte olur.
  • 2. kutu, diğerlerinden 2 kat daha geniş olur.

flex-shrink: Küçülme Oranı

Eğer yeterli alan yoksa, hangi öğenin ne kadar küçüleceğini belirler.

Birinci Kutu Küçülmesin

.box:nth-child(1) {
    flex-shrink: 0;
}

flex-basis: Başlangıç Genişliği

Öğenin başlangıçta ne kadar geniş olacağını belirler.

Tüm Kutular 200px Başlangıç Genişliğinde Olsun

.box {
    flex-basis: 200px;
}

Not: flex-basis genişlik belirler ama flex-grow ve flex-shrink devreye girince boyut değişebilir.

Öğelerin Sırasını Değiştirme (order)

CSS Flexbox ile HTML sırasını değiştirmeden, öğelerin sıralamasını değiştirebiliriz.

İkinci Kutuyu En Sona Alalım

.box:nth-child(2) {
    order: 3;
}

Not: Varsayılan order değeri 0‘dır. Büyük olanlar sona gider.

Tek Bir Öğeyi Farklı Hizalama (align-self)

Bazen tüm öğeleri hizalamak yerine sadece bir öğeyi farklı hizalamak isteyebiliriz.

Sadece İkinci Kutuyu Alta İndir

.box:nth-child(2) {
    align-self: flex-end;
}

Önemli align-self Değerleri:

DeğerAçıklama
flex-startÜste hizalar
flex-endAlta hizalar
centerOrtalar
stretchBoşluğu doldurur
baselineYazı satırına hizalar

Bir web sitesinde en yaygın kullanılan yapılardan biri navigasyon menüsüdür. Bunu CSS Flexbox ile kolayca oluşturabiliriz.

Esnek Navigasyon Menüsü

<nav class="menu">
    <div class="logo">LOGO</div>
    <ul class="menu-items">
        <li><a href="#">Anasayfa</a></li>
        <li><a href="#">Hakkımızda</a></li>
        <li><a href="#">Hizmetler</a></li>
        <li><a href="#">İletişim</a></li>
    </ul>
</nav>

.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #333;
    padding: 15px;
}

.logo {
    color: white;
    font-size: 24px;
}

.menu-items {
    display: flex;
    list-style: none;
    gap: 20px;
}

.menu-items a {
    text-decoration: none;
    color: white;
    padding: 10px;
}

Ne yaptık?

  • justify-content: space-between; ile logoyu sola, menüyü sağa hizaladık.
  • gap: 20px; ile menü öğeleri arasına boşluk koyduk.
  • align-items: center; ile dikey olarak ortaladık.

Kart Yapısı ile Esnek Kutu Tasarımı

Birçok web sitesinde ürünler, yazılar veya hizmetler için kart yapısı kullanılır. Bunu CSS Flexbox ile nasıl yapacağımıza bakalım.

Kart Yapısı ile 3’lü Kutu Tasarımı

<div class="box-container">
    <div class="box">
        <h2>Kart 1</h2>
        <p>Bu bir karttır.</p>
    </div>

    <div class="box">
        <h2>Kart 2</h2>
        <p>Bu da bir karttır.</p>
    </div>

    <div class="box">
        <h2>Kart 3</h2>
        <p>Başka bir kart daha.</p>
    </div>
</div>

.box-container {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.box{
    background: lightblue;
    padding: 20px;
    width: 200px;
    text-align: center;
    border-radius: 10px;
}

Ne yaptık?

  • display: flex; ile kartları yatay hizaladık.
  • justify-content: center; ile merkeze aldık.
  • gap: 20px; ile kartlar arasına boşluk koyduk.

Duyarlı (Responsive) Düzen

Şimdiye kadar yaptıklarımız masaüstü için uygundu. Peki mobilde nasıl görünecek? flex-wrap ile mobil uyumlu hale getirelim.

Duyarlı Kart Tasarımı

.box-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.box{
    flex-basis: 30%;
}

@media (max-width: 768px) {
    .kart {
        flex-basis: 100%;
    }
}

Ne yaptık?

  • flex-wrap: wrap; ile küçük ekranlarda öğelerin alt alta geçmesini sağladık.
  • @media (max-width: 768px) ile mobilde kartları tam genişlik yaptık.

Daha fazlası için w3schools sayfasına bakabilirsin. Ayrıca “CSS” ve “HTML” kategorilerine de bakmayı unutma.

  1. Flexbox nedir ve ne için kullanılır?

    Flexbox, CSS’in sunduğu bir düzenleme modelidir. Öğeleri yatay veya dikey eksende hizalamak, boşlukları ayarlamak ve esnek düzenler oluşturmak için kullanılır.

  2. Flexbox ve Grid arasındaki fark nedir?

    Flexbox, tek boyutlu (satır veya sütun) hizalamalar için idealdir. Grid ise iki boyutlu (satır ve sütun birlikte) düzenler oluşturmak için kullanılır.

  3. Flexbox neden tercih edilmelidir?

    Flexbox, öğeleri hizalama, boşlukları yönetme ve duyarlı tasarımlar yapma konusunda büyük kolaylık sağlar. Önceden kullanılan float, inline-block veya position gibi yöntemlere göre daha basit ve esnektir.

  4. Flexbox ile öğeleri nasıl ortalarım?

    Yatay ve dikey eksende ortalamak için aşağıdaki kod kullanılır:
    .container { display: flex; justify-content: center; align-items: center; height: 100vh; }

  5. justify-content ve align-items farkı nedir?

    justify-content: Öğeleri ana eksende hizalar (varsayılan olarak yatay).
    align-items: Öğeleri çapraz eksende hizalar (varsayılan olarak dikey).

  6. flex-wrap ne işe yarar?

    Öğelerin bir satıra sığıp sığmayacağını belirler. wrap değeri kullanılırsa, öğeler sığmazsa alt satıra geçer.

  7. flex-grow ve flex-shrink arasındaki fark nedir?

    flex-grow: Öğenin boş alanı ne kadar dolduracağını belirler.
    flex-shrink: Alan daraldığında öğenin ne kadar küçüleceğini belirler.

  8. Mobil uyumlu Flexbox tasarımı nasıl yapılır?

    flex-wrap: wrap; kullanarak öğelerin dar ekranlarda alt alta geçmesini sağlayabilirsiniz. Ayrıca @media sorguları ile duyarlı tasarımlar oluşturabilirsiniz.

  9. Flexbox mı yoksa Grid mi kullanmalıyım?

    Eğer düzeniniz satır veya sütun bazlı ise Flexbox, daha karmaşık ızgara yapıları için Grid tercih edilmelidir.

Etiketler: CSS Flexbox
Paylaş:
author-img
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.

0 Yorum

Henüz yorum yapılmamış. İlk yorumu siz yapabilirsiniz!

Yorum Yap

Bir Yorum Yazın

E-posta adresiniz paylaşılmayacak. Gerekli alanlar * ile işaretlenmiştir.

CSS Kategorisindeki Diğer Yazılar
CSS Grid Layout: Modern Web Tasarımının Temeli
CSS Grid Layout: Modern Web Tasarımının Temeli
CSS ile Form Tasarımı: Modern ve Etkili Yöntemler
CSS ile Form Tasarımı: Modern ve Etkili Yöntemler
CSS Float ve Clear Özellikleri: Derinlemesine Bir İnceleme
CSS Float ve Clear Özellikleri: Derinlemesine Bir İnceleme
CSS Position Özelliği: Web Sayfalarınızı Konumlandırmanın Temel Taşları
CSS Position Özelliği: Web Sayfalarınızı Konumlandırmanın Temel Taşları
CSS Display Özelliği: Web Sayfalarınızın Görünümünü Kontrol Edin
CSS Display Özelliği: Web Sayfalarınızın Görünümünü Kontrol Edin