CSS Flexbox Jeneratörü

BroBroGo editör ekibi tarafından yazılmış ve incelenmiştir.Son güncelleme: 2026-08-01

CSS Flexbox Düzeni ve Temel Yapısı

CSS Flexbox (Esnek Kutu Düzeni), web arayüzlerinde tek boyutlu düzenler oluşturmak için kullanılan güçlü bir yerleşim modelidir. Bu model, öğelerin bir boyut üzerinde (satır veya sütun boyunca) nasıl hizalanacağını, dağıtılacağını ve boşluklandırılacağını belirler. Flexbox Jeneratörü, bu yerleşim kurallarını görsel kontroller aracılığıyla yapılandırmanıza, değişiklikleri canlı bir önizleme üzerinde izlemenize ve projeniz için gereken CSS kodunu anında üretmenize olanak tanır.

Flexbox düzeni iki temel bileşenden oluşur: dış kapsayıcı (flex container) ve bu kapsayıcının doğrudan içinde yer alan esnek öğeler (flex items). Düzenin genel akışını, hizalamasını ve boşluklarını kapsayıcı özellikleri belirlerken; her bir öğenin kendi boyutlanma davranışını, sıralamasını ve bireysel hizalamasını ise öğe bazlı özellikler yönetir.

Kapsayıcı Özellikleri ve Eksen İlişkisi

Bir flex kapsayıcısının davranışını belirleyen temel parametreler, öğelerin hangi yönde akacağını ve kullanılabilir alanı nasıl paylaşacağını tanımlar. Flexbox Jeneratörü üzerinde bu ayarları değiştirdiğinizde, kapsayıcıya ait CSS kuralları dinamik olarak güncellenir:

Yön (direction): Düzenin ana eksenini belirler. Satır (Row) seçildiğinde öğeler soldan sağa, Ters Satır (Row reverse) seçildiğinde sağdan sola dizilir. Sütun (Column) seçeneğinde öğeler yukarıdan aşağıya, Ters Sütun (Column reverse) seçeneğinde ise aşağıdan yukarıya doğru sıralanır. Yönü satırdan sütuna çevirmek ana eksen ile çapraz eksenin yerini değiştirir; bu durum hizalama özelliklerinin çalışma şeklini doğrudan etkiler.
Satır kaydırma (Wrap): Öğelerin tek bir satıra sığdırılıp sığdırılmayacağını kontrol eder. Kaydırma yok seçeneğinde tüm öğeler tek bir satırda kalmaya zorlanır ve gerekirse daralır. Kaydır seçildiğinde sığmayan öğeler bir sonraki satıra geçer. Ters kaydır ise taşan öğeleri ters yönde yeni bir satıra aktarır.
İçeriği yasla (justify-content): Öğelerin ana eksen boyunca nasıl dağıtılacağını belirler. Başlangıç, Son, Ortala, Aralarına boşluk bırak, Etrafına boşluk bırak ve Eşit boşluk bırak seçenekleri ile ana eksen üzerindeki boşluk dağılımı yönetilir.
Öğeleri hizala (align-items): Öğelerin çapraz eksen üzerindeki hizalamasını kontrol eder. Başlangıç, Son, Ortala, Esnet ve Taban çizgisi seçenekleri mevcuttur.
İçeriği hizala (align-content): Yalnızca satır kaydırma aktif olduğunda ve birden fazla satır oluştuğunda devreye girer. Satır gruplarının çapraz eksen boyunca nasıl konumlandırılacağını belirler. Başlangıç, Son, Ortala, Esnet, Aralarına boşluk bırak, Etrafına boşluk bırak ve Eşit boşluk bırak seçeneklerini sunar.
Boşluk (Gap): Öğelerin arasında ve satırların arasında bırakılacak mesafeyi sayısal bir değer olarak belirler. Bu özellik, öğelere ayrı ayrı dış boşluk (margin) tanımlama ihtiyacını ortadan kaldırır.

Esnek Öğe Özellikleri ve Bireysel Davranışlar

Kapsayıcı içindeki her bir öğe, kendi esneklik ve sıralama kurallarına sahip olabilir. Flexbox Jeneratörü, her öğe için şu özellikleri ayrı ayrı yapılandırmanıza imkan tanır:

Sıra (Order): Öğenin görsel sıralamadaki konumunu belirleyen sayısal bir değerdir. HTML kaynak kodundaki sırayı değiştirmeden, öğelerin ekrandaki dizilim sırasını değiştirmek için kullanılır.
Büyüme (Grow): Kapsayıcıda boş alan kaldığında, öğenin bu alanı doldurmak için ne kadar büyüyeceğini belirten sayısal bir katsayıdır.
Küçülme (Shrink): Kapsayıcı alanı daraldığında, öğenin diğer öğelere kıyasla ne oranda küçüleceğini belirleyen sayısal bir katsayıdır.
Temel (basis): Öğenin esnetilmeden veya daraltılmadan önceki başlangıç boyutunu tanımlar. Sayısal bir değer alabileceği gibi Otomatik temel (auto basis) olarak da ayarlanabilir.
Kendini hizala (align-self): Kapsayıcının genel align-items kuralını tek bir öğe için geçersiz kılarak, o öğenin çapraz eksende bağımsız şekilde hizalanmasını sağlar. Otomatik, Başlangıç, Son, Ortala, Esnet ve Taban çizgisi değerlerini alabilir.

Yaygın Flexbox Düzen Şablonları

Flexbox, modern web tasarımında sıkça karşılaşılan birçok yerleşim senaryosunu kolayca çözmek için kullanılır. Araç üzerinde yer alan ön ayarlar (presets) sayesinde şu yaygın düzen yapıları hızlıca oluşturulabilir:

Ortala: Bir öğeyi hem yatay hem de dikey eksende tam olarak ortalamak için kullanılır. Kapsayıcının justify-content ve align-items özellikleri Ortala olarak ayarlanır.
Navigasyon Çubuğu: Logoyu sol köşede, menü elemanlarını ise sağ köşede konumlandırmak veya öğeleri yatayda eşit dağıtmak için Aralarına boşluk bırak hizalamasından yararlanılır.
Yığın: Öğelerin dikey bir sütun halinde alt alta dizildiği ve aralarına belirli bir boşluk (gap) verildiği düzenlerdir.
Kartlar: Yan yana dizilen, ekran daraldığında alt satıra kayan ve esnek genişliklere sahip kart tasarımları için satır kaydırma ve büyüme oranları birlikte kullanılır.
Yan Menü: Ana içerik alanı ile yan menünün yan yana konumlandırıldığı, yan menünün sabit genişlikte kalıp ana içeriğin kalan tüm alanı kapladığı düzenlerdir.

Veri İşleme ve Gizlilik Politikası

Flexbox Jeneratörü ile çalışırken oluşturduğunuz tüm düzen tasarımları ve yaptığınız ayarlar doğrudan kullandığınız web tarayıcısında işlenir. Araç üzerinde gerçekleştirdiğiniz hiçbir işlem veya girdiğiniz değerler BroBroGo sunucularına yüklenmez. Tüm kod üretimi ve görsel önizleme işlemleri yerel olarak tarayıcınızda tamamlanır.

Sıkça Sorulan Sorular

justify-content ile align-items arasındaki fark nedir?

Justify-content, öğeleri ana eksen (satır veya sütunun aktığı yön) boyunca boşluklandırırken, align-items onları diğer eksen boyunca konumlandırır. Yönü satırdan (row) sütuna (column) çevirdiğinizde iki eksen yer değiştirir, böylece justify-content yukarıdan aşağıya, align-items ise soldan sağa çalışmaya başlar.

Öğe bazlı kontroller nasıl çalışır?

Numarasına göre bir öğe seçin, ardından boş alanı doldurmak için ne kadar büyüyeceğini (grow), alan daraldığında ne kadar küçüleceğini (shrink), başlangıç boyutunu (basis) ve kendi çapraz eksen hizalamasını ayarlayın. Sıra (order), HTML koduna dokunmadan bir öğeyi ekranda daha önce veya daha sonra gösterecek şekilde taşır. CSS çıktısında yalnızca gerçekten değiştirdiğiniz öğeler kendi kurallarını alır.

wrap ve align-content ne zaman önem kazanır?

Kaydırma (wrap) kapalıyken, her öğe tek bir satıra zorlanır ve daha dar olmaya sıkıştırılabilir. Açtığınızda ise artık sığmayan öğeler bir sonraki satıra düşer — işte o zaman align-content devreye girer ve satırları bir grup olarak boşluklandırır. Gap, margin kullanmadan öğeler ve satırlar arasındaki boşluğu ayarlar.

Yeni öğeler eklediğimde veya CSS kodunu kopyaladığımda ne olur?

Araçta "Öğe ekle" butonuna tıkladığınızda, mevcut düzeninize "Öğe 5" gibi yeni bir eleman dahil olur ve canlı önizleme anında güncellenir. Tasarımınızı tamamladıktan sonra "CSS Kopyala" butonuna tıkladığınızda, butonun üzerindeki yazı "Kopyalandı" olarak değişir ve üretilen CSS kodu panonuza aktarılır. CSS çıktısında yalnızca özellikleri varsayılandan farklı olan öğeler için özel CSS kuralları yazılır.

SSS