CSS Flexbox Üretici

Konteyner özellikleri

Öğe özellikleri

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.