Flexbox oluşturucu
Özellikleri ayarlayın ve gerçekte ne yaptıklarını sade bir dille okuyun.
- Tarayıcınızda çalışır — metniniz hiçbir yere gönderilmez
- Kayıt yok, kota yok, istediğiniz sıklıkta ücretsiz kullanın
Nasıl çalışır
Flexbox karmaşık değildir, ama onunla ilgili bir şey neredeyse herkesi yakalar: justify-content ve align-items yatay ve dikey anlamına gelmez. Yön boyunca ve yöne çapraz anlamına gelirler; yön ise sizin belirlediğiniz bir şeydir.
Tuzak, doğrudan söylenmiş
flex-direction: row ile justify-content yatay, align-items dikey çalışır. column'a geçerseniz tamamen yer değiştirirler. Flexbox yüzünden kaybedilen her saat esasen budur. Alttaki açıklama yönü değiştirdikçe güncellenir; böylece ilişki ezberlenmek yerine görünür olur.
Ana eksen ve çapraz eksen
Ana eksen, flex-direction ile belirlenen, öğelerin boyunca aktığı eksendir. Çapraz eksen ona diktir. justify-content boşluğu ana eksen boyunca dağıtır; align-items öğeleri çapraz eksende konumlandırır. Bu iki ad yerleştikten sonra gerisi gelir.
gap ve marjinlerin yerini neden aldığı
gap, öğeler arasına ilk ve son öğenin dışına eklemeden boşluk koyar; marjinlerin yanlış yaptığı ve insanların eskiden :last-child hileleriyle düzelttiği şey tam olarak budur. Güncel her tarayıcıda desteklenir ve artık ondan kaçınmak için bir neden yoktur.
nowrap, taşma değil küçülme demektir
Varsayılan nowrap'tır ve öğeler yeni bir satıra geçmek yerine doğal boyutlarının altına küçülerek sığar. Metnin bir flex satırı içinde zaman zaman beklenmedik biçimde sıkışmasının nedeni budur. wrap ayarlamak öğelerin bunun yerine aşağı inmesini sağlar; bir alt öğede min-width: 0, içeriğinin ötesine küçülmesini durdurur.
Her iki yönde ortalama
justify-content: center ile align-items: center, flex-direction ne olursa olsun bir öğeyi her iki yönde ortalar; tamamen ezberlemeye değer tek kombinasyon budur.
Flexbox oluşturucu — sorular
align-items neden öğeleri yatay olarak hareket ettiriyor?
Çünkü flex-direction column. İki özellik ekranı değil, yönü izler.
Ana eksen ile çapraz eksen arasındaki fark nedir?
Ana eksen, flex-direction ile belirlenen, öğelerin aktığı yöndür. Çapraz eksen ona diktir.
Bir şeyi her iki yönde nasıl ortalarım?
justify-content: center ile birlikte align-items: center.
Metnim neden sıkışıyor?
Varsayılan nowrap, öğeleri sığması için küçültür. flex-wrap: wrap veya alt öğede min-width: 0 ayarlayın.
Flexbox ile gap kullanabilir miyim?
Evet, güncel her tarayıcıda. Uçlara boşluk eklemediği için marjinlerden daha iyidir.