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.

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.

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.

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; }

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).

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.

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.

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.

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.

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

İçindekiler

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:

Flex Container: İçindeki öğeleri yönlendiren kapsayıcı.
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ğer	Açıklama
`flex-start`	Varsayılan, sola hizalar
`flex-end`	Sağa hizalar
`center`	Ortalar
`space-between`	İlk ve son öğeyi kenarlara yaslar, ortadakileri eşit boşluk bırakır
`space-around`	Tü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ğer	Açıklama
`flex-start`	Üste hizalar
`flex-end`	Alta hizalar
`center`	Ortalar
`stretch`	Varsayı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ğer	Açıklama
`nowrap`	Varsayılan, tüm öğeler tek satırda kalır
`wrap`	Sığmazsa alt satıra geçer
`wrap-reverse`	Alt 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ğer	Açıklama
`flex-start`	Üste hizalar
`flex-end`	Alta hizalar
`center`	Ortalar
`space-between`	İlk ve son satırı kenarlara yaslar, ortadakileri eşit boşluk bırakır
`space-around`	Tüm satırların etrafına eşit boşluk bırakır
`stretch`	Varsayı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ğer	Açıklama
`flex-start`	Üste hizalar
`flex-end`	Alta hizalar
`center`	Ortalar
`stretch`	Boşluğu doldurur
`baseline`	Yazı satırına hizalar

Navigasyon Menüsü Yapımı

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.

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.
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.
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.
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; }
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).
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.
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.
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.
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ş:

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.