Softonic

CSS Flexbox Üretici

Adım 1 / 2 CSS oluştur
Sonraki

Flexbox, tek boyutlu düzen için ilk tercihtir: kart satırları, nav çubukları, ortalanmış hero alanları, formlar. Konteyner-öğe modeli güçlüdür; ancak özellikleri belirgin olmayan biçimlerde etkileşir. Bu üretici konteyneri ayarlarken tahminde bulunmanızı gerektirmez: flex-direction, justify-content, align-items, flex-wrap ve gap seçin, stilinize doğrudan kopyalayabileceğiniz temiz bir CSS kuralı elde edin.

CSS nasıl oluşturulur

  1. 1

    Bir yön seçin

    row, column veya ters çevrilmiş varyantları seçin. Bu, öğelerin aktığı eksen olan flex-direction'ı belirler.

  2. 2

    justify-content ayarlayın

    Öğelerin ana eksen boyunca nasıl dağılacağını seçin: başlangıç, orta, space-between, space-around veya bitiş.

  3. 3

    align-items ayarlayın

    Öğelerin çapraz eksende nasıl hizalanacağını seçin: stretch, başlangıç, orta veya bitiş.

  4. 4

    gap ve wrap ayarlayın

    Öğeler arasına piksel cinsinden boşluk ekleyin ve öğelerin yeni satıra sarılıp sarılmayacağını belirleyin.

  5. 5

    CSS'i kopyalayın

    Üretici, tüm özelliklerle birlikte konteyner kuralını çıkarır; stilinize yapıştırmaya hazırdır.

Konteyner özellikleri

Özellik Değerler Etki
flex-direction row / column / row-reverse / column-reverse Ana eksen
flex-wrap nowrap / wrap / wrap-reverse Öğelerin sarılıp sarılmayacağı
justify-content flex-start / center / flex-end / space-between / space-around / space-evenly Ana eksende dağılım
align-items flex-start / center / flex-end / baseline / stretch Her satırın çapraz eksen hizalaması
align-content aynı değerler + space-between / space-around Sarıldığında satırların çapraz eksen dağılımı
gap (row-gap, column-gap) uzunluk Öğeler arası boşluk

Öğe özellikleri

Özellik Değerler Etki
flex-grow 0+ (birimsiz) Artan boşluğu emme payı
flex-shrink 0+ (birimsiz) Taşmadan küçülme payı
flex-basis uzunluk veya auto Grow/shrink öncesi başlangıç boyutu
flex kısaltma (1 1 auto, vb.) Üçünü birden
align-self auto / flex-start / center / flex-end / baseline / stretch Tek öğe için align-items’ı geçersiz kılar
order tamsayı DOM’u değiştirmeden görsel yeniden sıralama

flex: 1 numarası

flex: 1, flex: 1 1 0% için kısaltmadır. Bir öğeyi:

  • Mevcut alanı doldurmak için büyütür (grow: 1)
  • Gerekirse küçültür (shrink: 1)
  • Sıfır boyuttan başlatır (basis: 0%)

Eşit genişlikli sütunlar için her öğede flex: 1 mükemmel bölüşüm verir. İçeriğin altına inmemesi gereken yan menüler için flex: 0 0 240px (büyüme yok, küçülme yok, 240px basis) kullanın.

Yaygın desenler

Ortalanmış hero

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Solda logo, sağda bağlantılar olan navbar

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links {
  margin-left: auto;  /* sağa it */
  display: flex;
  gap: 1rem;
}

Duyarlı kart satırı

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card {
  flex: 1 1 260px;  /* büyür/küçülür, sarmadan önce 260px minimum */
}

Buton ile form alanı (input esnek, buton sabit)

.field {
  display: flex;
  gap: 0.5rem;
}
.field input {
  flex: 1;
}
.field button {
  flex: 0 0 auto;
}

Flexbox ile Grid karşılaştırması

  • Flexbox: tek boyut (satır YA DA sütun). Öğe boyutları içerik kaynaklı olduğunda ya da boşluğu tek bir hat boyunca dağıttığınızda en iyisidir.
  • Grid: iki boyut (açık parça hatlarıyla satırlar VE sütunlar). Düzenin aynı anda satır ve sütun yapısı olduğunda en iyisidir.

Nav çubuğu veya kart yığını için: Flexbox. Hizalanmış kartların birden çok satırlı ürün-kart grid’i için: CSS Grid. Pek çok gerçek sayfa her ikisini kullanır, Grid sayfa düzeni içinde bileşenlerde Flexbox.

Yaygın hatalar

  • Öğeler konteyneri doldurmuyor: varsayılan align-items: stretch yalnızca öğelerin sabit yüksekliği yoksa uygulanır. Açık yükseklikle o boyutta kalırlar.
  • gap çalışmıyor: tarayıcı desteğini kontrol edin. Flex gap geç geldi; Safari <14.1 desteklemiyordu. Artık 2024+ evrensel.
  • Column flex’in çocukları çöküyor: bir flex sütununun varsayılan değeri align-items: stretch’tir; bu da öğeleri konteyner genişliğine kadar uzatır. Bir çocuk genişlik belirlerse bu davranıştan çıkar.
  • order yalnızca görseldir: ekran okuyucular ve klavye navigasyonu DOM sırasını takip eder. İçeriği anlamlı kılmak için order kullanmayın; yalnızca görsel rötuş için.

Sık Sorulan Sorular

İki boyutlu sayfa düzenleri (birlikte satırlar ve sütunlar) için Grid. Tek boyutlu dağılımlar (nav çubuğu, buton satırı, yığın) için Flexbox. Bir Grid hücresinin içinde iç düzen için Flexbox. Çoğu karmaşık arayüz her ikisini de kullanır.

Çünkü flex-shrink varsayılanı 1’dir; ancak min-width varsayılanı auto, yani içerik genişliğine eşittir. Öğenin doğal boyutunun altına inmesine izin vermek için öğede min-width: 0 (veya min-inline-size: 0) ayarlayın.

Konteynerde display: flex; justify-content: center; align-items: center;. “Bunu ortala” durumlarının büyük çoğunluğunu iki satırla halleder.

Evet, tüm modern tarayıcılarda. Safari geç kaldı (14.1, Nisan 2021’de eklendi); bugün tüm büyük tarayıcılar destekliyor. Mümkün olduğunda margin tabanlı boşluğu gap ile değiştirin, çok daha basit.

İlgili Araçlar

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

EditorConfig Oluşturucu

Girinti stili ve boyutu, satır sonu, karakter kümesi ve boşluk kurallarınızla bir .editorconfig dosyası oluşturarak IDE ve editörler arasında tutarlı biçimlendirme sağlayın.

E-posta Doğrulayıcı

Bir e-posta adresini doğrulayın: RFC 5322 sözdizimi kontrolü, canlı MX kaydı sorgulama, ayrıca yerel kısım, alan adı ve uzunluk bilgileri. Hiçbir e-posta gönderilmez.

Araç diğer dillerde mevcuttur