Esnek taban ve genişlik arasındaki farklar nelerdir?

Bununla ilgili sorular ve makaleler vardı, ancak söyleyebildiğim kadarıyla kesin bir şey yok. Bulabildiğim en iyi özet

flex-based , başka bir şey hesaplanmadan önce öğenin başlangıç ​​/ başlangıç ​​boyutunu belirlemenizi sağlar. Bir yüzde veya mutlak bir değer olabilir.

... kendi içinde esnek temelli setlerin davranışları hakkında fazla bir şey söylemiyor . Mevcut flexbox bilgimle, bunun neden genişliği de tanımlayamadığını anlamıyorum .

Pratikte esnek temelin genişlikten ne kadar farklı olduğunu bilmek istiyorum :

• Genişliği flex-base ile değiştirirsem (ve tersi), görsel olarak ne değişecek?
• Her ikisini de farklı bir değere ayarlarsam ne olur? Aynı değere sahiplerse ne olur?
• Genişlik veya esneklik temelini kullanmanın diğerini kullanmada önemli bir fark yaratacağı bazı özel durumlar var mı?
• Flex-wrap , flex-grow ve flex-shrink gibi diğer flexbox stilleriyle birlikte kullanıldığında genişlik ve esnek temel nasıl değişir ?
• Başka önemli farklar var mı?

Düzenleme / açıklama : Bu soru, tam olarak esnek temel özellik kümelerinin tam olarak ne olduğu konusunda farklı bir biçimde sorulmuştur. ancak esnek temel ve genişlik (veya yükseklik ) arasındaki farkların daha doğrudan bir karşılaştırmasını veya özetini iyi hissettim .

Düşünmek flex-direction

Sorunuzu okurken akla ilk gelen şey flex-basisher zaman geçerli değildir width.

Ne flex-directionolduğunu row, flex-basiskontrol genişlik.

Ama flex-directionolup column, flex-basisyüksekliği kontrol eder.

Temel Farklılıklar

flex-basisVe width/ arasındaki bazı önemli farklar şunlardır height:

• flex-basisyalnızca esnek öğeler için geçerlidir. Esnek kaplar (aynı zamanda esnek öğeler de değildir) yok sayar, flex-basisancak widthve kullanabilir height.

• flex-basissadece ana eksende çalışır. Oyuna gir Örneğin, flex-direction: column, widthmülkiyet yatay esnek öğeleri boyutlandırma için gerekli olacaktır.

• flex-basiskesinlikle konumlandırılmış esnek ürünler üzerinde hiçbir etkisi yoktur. widthve heightözellikler gerekli olacaktır. Kesinlikle konumlandırılmış esnek öğeler esnek düzende yer almaz .

• Kullanarak flex, üç özellik özelliği - flex-grow, flex-shrinkve 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-basiswidthflex-basisautocontent

Spec'ten:

7.2.3. flex-basisözellik

Dışındaki tüm değerler için autove content, flex-basisaynı şekilde çözülürse widthyatay yazma modlarında.

Ama etkisi autoya contenthiç az ya da hiçbir şey olabilir. Spec daha fazla:

auto

Bir flex öğesinde belirtildiğinde, autoanahtar 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, autobir ana boyutu ( widthveya height) ile birlikte kullanılarak elde edilebilir auto.

Yani, spec göre flex-basisve widthkararlılığının aynı şekilde, sürece flex-basisolan autoveya content. Bu gibi durumlarda, flex-basisiçerik genişliğini kullanabilir (muhtemelen widthmülk de kullanır).

flex-shrinkfaktö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/ heightgeçersiz kılınabilir.

Örneğin, flex-basis: 100pxveya bununla width: 100pxbirleştiğinde flex-shrink: 1mutlaka 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-basisiç 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 widthmülkle birlikte, konteyner çocuklarının boyutlarına saygı duyar ve buna göre genişler.

Referanslar:

• Chrome, esnek ebeveynleri çocukların içeriğine göre genişletmez
• Esnek temel kullanırken esnek öğe taşması
• Genişlik ve esnek taban arasındaki fark
• İç içe geçmiş esnek kapları boyutlandırırken esnek temel göz ardı edilir.
• flex-base: 100px genişlikten farklı bir şey yapar: 100px + flex-base: auto

Örnekler:

• https://jsfiddle.net/t419zhra/ (kaynak: @Dremora )
• https://codepen.io/anon/pen/NVxaoy (kaynak @Daniel )
• https://jsfiddle.net/voc9grx6/ (kaynak: Chromium Bugs )
• https://jsfiddle.net/qjpat9zk/ (kaynak: Chromium Bugs )

kullanarak öğeleri esnek flex-basisve white-space: nowraptaşma inline-flexkabı. widthİşler.

Görünüşe göre bir kardeş, bir kardeşi oluştururken bir çocuğu inline-flextanımıyor (tanımlanmamış genişliğe sahip bir öğe olsa da). Kap, öğeleri alacak şekilde genişlemiyor.flex-basiswhite-space: nowrap

Ancak widthmü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:

• inline esnek konteyner genişliği büyümiyor
• Satır içi esnek kap (ekran: satır içi esnek) ana kabın tüm genişliğini genişletiyor

Misal:

• https://jsfiddle.net/p18h0jxt/1/ (yukarıdaki ilk gönderiden)

flex-basis(ve flex-grow) tablo öğesi üzerinde çalışmıyor

Referanslar:

• Flex-box neden bir div ile çalışır, ancak bir tablo ile çalışmaz?
• Neden flex-grow: 1 Safari'de bir masa için çalışıyor? (ve Edge)

flex-basisbü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.

• Kesinlikle konumlandırılmış kap, genişlik esnek kutu içeriğine uyacak şekilde genişlemiyor

Yukarıdaki bağlantıda sunulan örnekte olduğu position: absolutegibi, kullanımı floatve inline-blockaynı kusurlu çıktıyı da içerecektir ( jsfiddle demosu ).

IE 10 ve 11'i etkileyen hatalar:

• flexbirimsiz flex-basisdeğerlerle kestirme bildirimler dikkate alınmaz
• flex-basis hesaba katmıyor box-sizing: border-box
• flex-basis desteklemiyor calc()
• Steno flex-basiskullanırken önemi göz ardı edilirflex

Michael_B'nin mükemmel özetine ek olarak, bunu tekrarlamaya değer:

flex-based , başka bir şey hesaplanmadan önce öğenin başlangıç ​​/ başlangıç boyutunu belirlemenizi sağlar . Bir yüzde veya mutlak bir değer olabilir.

Buradaki önemli kısım başlangıç .

Kendi başına, diğer esnek büyüme / büzülme özellikleri devreye girene kadar genişlik / yüksekliğe çözümlenir .

Yani. ile bir çocuk

.child {
 flex-basis:25%;
 flex-grow:1;
}

başlangıçta% 25 genişliğinde olacak, ancak diğer unsurlar hesaba katılana kadar olabildiğince genişleyecektir.

Kısa bir demo:

.flex {
  width: 80%;
  margin: 1em auto;
  height: 25px;
  display: flex;
  background: rebeccapurple;
}
.child {
  flex-basis: auto;
  /* default */
  background: plum;
}
.value {
  flex-basis: 25%;
}
.grow {
  flex-grow: 1;
}

<div class="flex">
  <div class="child auto">Some Content</div>
</div>
<div class="flex">
  <div class="child value">Some Content</div>
</div>
<div class="flex">
  <div class="child grow">Some Content</div>
</div>

Deneme flex-grow, flex-shrinkve flex-basis (veya stenografi flex :fg fs fb) ... bazı ilginç sonuçlara yol açabilir.

Eklenmesi muhtemel en önemli nokta:

Tarayıcı desteklemiyorsa ne olur flex? Böyle bir durumda, width/heightdevralın ve değerleri geçerlidir.

width/heightTamamen farklı bir değere sahip olsanız bile, öğeleri tanımlamak çok iyi bir fikir - neredeyse gerekli flex-basis. Devre dışı bırakarak display:flexve ne aldığınızı görerek test etmeyi unutmayın .