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


224

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 .


Esnek temeli açıklayan en iyi makale , esnek büyümek ve küçültmek
ZenVentzi

Yanıtlar:


339

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:

Örnekler:


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:

Misal:


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

Referanslar:


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.

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:


2
Nasıl min-width:100px;? Küçültmeyi devre dışı bırakmak bir seçenek olabilir mi?
Mori

1
@ Mori, evet, flex-shrinkdurur min-width. Eşdeğer esnek kural olurdu flex: 1 0 100px.
Michael Benjamin

flex: 1 0 100pxaynı sonuca götürür, ancak "eşdeğer" ile ne demek istediğinizden emin değilim.
Mori

Demek istediğim flex: 0 0 100px, mesela niye eşit düşünmüyoruz ?
Mori

2
@Mori, çünkü o zaman genişliğe eşit . Esnek büyümeye ihtiyaç duyar : 1 bileşen, elemanın esnek temel tarafından belirlenen minimum genişlikten büyümesine izin verir .
Michael Benjamin

33

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:

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


Genellikle esnek bağlamda her ikisini de buldum flex-basisve width / heightbir elemanın başlangıç ​​/ başlangıç ​​boyutunu ayarladım. Örneğin, flex-basis: 200pxtemel olarak aynı şekilde çalışır flex-basis: auto; width: 200px;. Görünüşe göre flex-basisayarlanmadığı zaman değeri autogeçersiz kılar width / height. Gördüğüm tek fark, içerik taşmasının işlenme biçimidir.
Karolis

5

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 .


2
Büyük tarayıcılar arasında, esnek özellikleri desteklemeyen tek tarayıcılar IE <10'dur. Caniuse.com/#search=flex
Michael Benjamin

1
@Michael_B Tabii ve belki de sadece benim ama kesinlikle desteklemeyen Nintendo 3DS tarayıcısına kadar dahil olmak üzere mobil tarayıcıları da desteklemeliyim flex.
Niet the Dark Absol
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.