Düşünmek flex-direction
Sorunuzu okurken akla ilk gelen şey flex-basis
her zaman geçerli değildir width
.
Ne flex-direction
olduğunu row
, flex-basis
kontrol genişlik.
Ama flex-direction
olup column
, flex-basis
yüksekliği kontrol eder.
Temel Farklılıklar
flex-basis
Ve width
/ arasındaki bazı önemli farklar şunlardır height
:
flex-basis
yalnızca esnek öğeler için geçerlidir. Esnek kaplar (aynı zamanda esnek öğeler de değildir) yok sayar, flex-basis
ancak width
ve kullanabilir height
.
flex-basis
sadece ana eksende çalışır. Oyuna gir Örneğin, flex-direction: column
, width
mülkiyet yatay esnek öğeleri boyutlandırma için gerekli olacaktır.
flex-basis
kesinlikle konumlandırılmış esnek ürünler üzerinde hiçbir etkisi yoktur. width
ve height
özellikler gerekli olacaktır. Kesinlikle konumlandırılmış esnek öğeler esnek düzende yer almaz .
Kullanarak flex
, üç özellik özelliği - flex-grow
, flex-shrink
ve flex-basis
- düzgün bir beyan birleştirilebilir. Kullanılması width
, aynı kural kodunun birden fazla hat gerektirecektir.
Tarayıcı Davranışı
Nasıl render edildikleri açısından , veya olmadığı sürece ve arasında hiçbir fark olmamalıdır .flex-basis
width
flex-basis
auto
content
Spec'ten:
7.2.3. flex-basis
özellik
Dışındaki tüm değerler için auto
ve content
, flex-basis
aynı şekilde çözülürse width
yatay yazma modlarında.
Ama etkisi auto
ya content
hiç az ya da hiçbir şey olabilir. Spec daha fazla:
auto
Bir flex öğesinde belirtildiğinde, auto
anahtar kelime, kullanılan ana boyut özelliğinin değerini alır flex-basis
. Bu değerin kendisi ise auto
, kullanılan değer olur content
.
content
Esnek öğenin içeriğine göre otomatik boyutlandırmayı belirtir.
Not: Bu değer, Esnek Kutu Düzeni'nin ilk sürümünde yoktu ve bu nedenle bazı eski uygulamalar bunu desteklemeyecektir. Eşdeğer etki, auto
bir ana boyutu ( width
veya height
) ile birlikte kullanılarak elde edilebilir auto
.
Yani, spec göre flex-basis
ve width
kararlılığının aynı şekilde, sürece flex-basis
olan auto
veya content
. Bu gibi durumlarda, flex-basis
içerik genişliğini kullanabilir (muhtemelen width
mülk de kullanır).
flex-shrink
faktör
Esnek bir kabın başlangıç ayarlarını hatırlamak önemlidir. Bu ayarlardan bazıları şunlardır:
flex-direction: row
- esnek öğeler yatay olarak hizalanır
justify-content: flex-start
- esnek öğeler ana eksende çizginin başlangıcında istiflenir
align-items: stretch
- esnek ürünler kabın çapraz boyutunu kaplayacak şekilde genişleyecektir
flex-wrap: nowrap
- esnek eşyalar tek bir sırada kalmaya zorlanır
flex-shrink: 1
- esnek bir ürünün küçülmesine izin verilir
Son ayara dikkat edin.
Esnek öğelerin varsayılan olarak küçülmesine izin verildiği için (bu, kabın taşmasını önler), belirtilen flex-basis
/ width
/ height
geçersiz kılınabilir.
Örneğin, flex-basis: 100px
veya bununla width: 100px
birleştiğinde flex-shrink: 1
mutlaka 100 piksel olmayacaktır.
Belirtilen genişliği oluşturmak ve sabit tutmak için küçülmeyi devre dışı bırakmanız gerekir:
div {
width: 100px;
flex-shrink: 0;
}
VEYA
div {
flex-basis: 100px;
flex-shrink: 0;
}
VEYA, spec tarafından önerildiği gibi:
flex: 0 0 100px; /* don't grow, don't shrink, stay fixed at 100px */
7.2. Esnekliğin Bileşenleri
Yazarlar, ortak kullanımlarıflex
karşılamak için belirtilmemiş bileşenleri doğru bir şekilde sıfırladığı için, esnekliği doğrudan longhand özelliklerinden ziyade steno kullanarak kontrol etmeye teşvik edilmektedir .
Tarayıcı Hataları
Bazı tarayıcılar, iç içe geçmiş esnek kaplardaki esnek öğelerin boyutlandırılmasında sorun yaşarlar.
flex-basis
iç içe geçmiş esnek bir kapta yok sayılır. width
İşler.
Kullanırken flex-basis
, konteyner çocuklarının boyutlarını göz ardı eder ve çocuklar kabı taşar. Ancak width
mülkle birlikte, konteyner çocuklarının boyutlarına saygı duyar ve buna göre genişler.
Referanslar:
Örnekler:
kullanarak öğeleri esnek flex-basis
ve white-space: nowrap
taşma inline-flex
kabı. width
İşler.
Görünüşe göre bir kardeş, bir kardeşi oluştururken bir çocuğu inline-flex
tanımıyor (tanımlanmamış genişliğe sahip bir öğe olsa da). Kap, öğeleri alacak şekilde genişlemiyor.flex-basis
white-space: nowrap
Ancak width
mülk yerine kullanıldığında flex-basis
, konteyner çocuklarının boyutlarına saygı duyar ve buna göre genişler. IE11 ve Edge'de bu bir sorun değildir.
Referanslar:
Misal:
flex-basis
(ve flex-grow
) tablo öğesi üzerinde çalışmıyor
Referanslar:
flex-basis
büyükbaba veya büyükanne-kap sığacak bir öğe olduğunda Chrome ve Firefox'ta başarısız olur. Edge'de kurulum iyi çalışıyor.
Yukarıdaki bağlantıda sunulan örnekte olduğu position: absolute
gibi, kullanımı float
ve inline-block
aynı kusurlu çıktıyı da içerecektir ( jsfiddle demosu ).
IE 10 ve 11'i etkileyen hatalar: