Geliştirici / CSS düzeni

Flexbox Oyun Alanı: Kapsayıcı ve Öğe CSS Denetimleri

Flex yönünü, sarmalamayı, iki yana hizalamayı, hizalamayı ve boşlukları deneyin; ardından her öğenin büyüme, küçülme, temel boyut, sıralama ve hizalama ayarlarını değiştirin. Düzenin nasıl değiştiğini görün ve CSS'yi kopyalayın.

Flexbox Oyun Alanı: Kapsayıcı ve Öğe CSS Denetimleri: Düzenlenebilir öğe özelliklerine sahip canlı bir Flexbox kapsayıcısı gösterir ve her denetimin yanında kısa bir açıklama sunar. Çapraz eksen etkilerini görünür kılmak için önizlemenin yüksekliği sabittir. Ortak satır ve sütunların kullanıldığı Grid düzenleri CSS Grid oluşturucuda bulunur. Sunucuya hiçbir dosya yüklenmeden tarayıcınızda %100 yerel olarak çalışır.

Kategori: Geliştirici araçları
Çalıştırma sayısı: Tarayıcınızda
Maliyet: Ücretsiz · kayıt gerekmez
Kullanılabilirlik: Kullanıma hazır

Flexbox yerleşimi deneme aracıYerel işleme

Tamamen tarayıcınızda çalışır

YönAna ekseni ve yönünü ayarlar.KaydırÖğeler sığmadığında ek satırlara izin verir.İçeriği yaslaBoş alanı ana eksen boyunca dağıtır.Öğeleri hizalaÖğeleri her satır içinde çapraz eksende hizalar.İçeriği hizalaKaydırma birkaç satır oluşturduğunda satırları çapraz eksende dağıtır.Aralık (px)Komşu öğeler ve satırlar arasındaki boşluğu ayarlar.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 12px;
}
.item-1 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-2 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-3 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-4 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-5 { flex: 0 1 120px; order: 0; align-self: auto; }

Bir satır veya sütun için flexbox kullanın. Hem satırların hem sütunların ortak izlere ihtiyaç duyduğu durumlarda CSS Grid kullanın. CSS Grid oluşturucuyu aç

Seçili öğe 1BüyütPozitif boş alanın göreli payı.KüçültTemel boyutla çarpılan göreli küçülme ağırlığı.TemelBüyüme veya küçülme öncesinde ana eksen boyunca başlangıç boyutu.SıraYalnızca görsel sıralama değişir; okuma ve klavye sırası aynı kalır.Kendini hizalaBu öğe için kapsayıcının çapraz eksen hizalamasını geçersiz kılar.

Flex yerleşim modeli

W3C CSS Flexible Box Layout Module Level 1: https://www.w3.org/TR/css-flexbox-1/ . Boş alan, ana eksen boyunca flex büyüme ve küçülme ağırlıkları kullanılarak dağıtılır.

Hizalama ve erişilebilirlik

MDN flexbox temel kavramları: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox . Çapraz eksen, ana eksene diktir; görsel yeniden sıralama belgenin sırasını değiştirmez.

Nasıl kullanılır?

Kapsayıcının yönünü, sarmalamayı ve hizalamasını ayarlayın.
Bir öğeye tıklayın ve öğeye özel boyutlandırma ile hizalama ayarlarını değiştirin.
Öğe ekleyin veya kaldırın, düzeni inceleyin ve oluşturulan CSS'yi kopyalayın.

Gizlilik ve sınırlamalar

Düzen ayarları tarayıcınızda yerel olarak işlenir.

İlgili araçlar

Sık sorulan sorular

align-content neden bazen hiçbir şey yapmıyor?

Flex satırlarını dağıtır. Görünür bir etki oluşturması için sarmalama, birden fazla satır ve çapraz eksende kullanılabilir boş alan gerekir.

order ekran okuyucu sırasını değiştirir mi?

Hayır. Yalnızca görsel sırayı değiştirir; belge okuma ve klavye sıraları değişmez. Mantıksal bir belge sırasını koruyun.

Bunun yerine ne zaman Grid kullanmalıyım?

Satırların ve sütunların ortak izleri paylaşması gerektiğinde Grid kullanın. Flexbox, öğeleri öncelikle tek bir eksen boyunca düzenlemek için kullanışlıdır.

Ücretsiz araç · tarayıcınızda kez çalıştırma · hesap gerekmez