Flex: 1 ne anlama geliyor?

Hepimizin bildiği gibi, flexmülkiyet için bir kısaltmadır flex-grow, flex-shrinkve flex-basisözellikleri. Varsayılan değeri, 0 1 autoyani

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

ama fark ettim, birçok yerde flex: 1kullanılıyor. 1 1 autoVeya için kısaltma mı 1 0 auto? Ne anlama geldiğini anlayamıyorum ve google'da hiçbir şey alamıyorum.

İşte açıklama:

https://www.w3.org/TR/css-flexbox-1/#flex-common

esnek: <pozitif-sayı>
esnek ile eşdeğer: <pozitif-sayı> 1 0. Esnek öğeyi esnek hale getirir ve esnek temelini sıfır olarak ayarlayarak, esnek kapsayıcıdaki boş alanın belirtilen oranını alan bir öğeyle sonuçlanır. Esnek kapsayıcıdaki tüm öğeler bu deseni kullanıyorsa boyutları belirtilen esnek faktörle orantılı olacaktır.

Bu nedenle flex:1eşdeğerdirflex: 1 1 0

flex: 1 şu anlama gelir:

flex-grow : 1;    ➜ The div will grow in same proportion as the window-size       
flex-shrink : 1;  ➜ The div will shrink in same proportion as the window-size 
flex-basis : 0;   ➜ The div does not have a starting value as such and will 
                     take up screen as per the screen size available for
                     e.g:- if 3 divs are in the wrapper then each div will take 33%.

DİKKATLİ OL

Bazı tarayıcılarda:

flex:1; eşit değilflex:1 1 0;

flex:1;= flex:1 1 0n;(burada n bir uzunluk birimidir).

• esnek büyüme: Öğenin esnek öğelerin geri kalanına göre ne kadar büyüyeceğini belirten bir sayı.
• flex-shrink Öğenin, esnek öğelerin geri kalanına göre ne kadar küçüleceğini belirten bir sayı
• flex-base Öğenin uzunluğu. Yasal değerler: "auto", "inherit" veya bir sayı ve ardından "%", "px", "em" veya başka bir uzunluk birimi.

Buradaki kilit nokta, esnek temelin bir uzunluk birimi gerektirmesidir .

Örneğin Chrome'da flex:1ve flex:1 1 0farklı sonuçlar üretin. Çoğu durumda işe flex:1 1 0;yarıyor gibi görünebilir, ancak gerçekte ne olduğunu inceleyelim:

MİSAL

Flex temeli ihmal edilir ve sadece flex-Grow ve flex-shrink uygulanır.

flex:1 1 0;= flex:1 1;=flex:1;

Bu ilk bakışta uygun görünebilir, ancak kabın uygulanan birimi yuvalanmışsa; beklenmeyeni bekle!

Bu örneği CHROME'da deneyin

.Wrap{
  padding:10px;
  background: #333;
}
.Flex110x, .Flex1, .Flex110, .Wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.Flex110 {
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
}
.Flex1 {
  -webkit-flex: 1;
  flex: 1;
}
.Flex110x{
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;
}

FLEX 1 1 0
<div class="Wrap">
  <div class="Flex110">
    <input type="submit" name="test1" value="TEST 1">
  </div>
</div>

FLEX 1
<div class="Wrap">
  <div class="Flex1">
    <input type="submit" name="test2" value="TEST 2">
  </div>
</div>

FLEX 1 1 0%
<div class="Wrap">
  <div class="Flex110x">
    <input type="submit" name="test3" value="TEST 3">
  </div>
</div>

UYUMLULUK

Bazı tarayıcıların spesifikasyona uymaması nedeniyle bunun başarısız olduğu unutulmamalıdır .

Tam esnek özelliği kullanan tarayıcılar:

• Firefox - ✓
• Edge - ✓ (Biliyorum, ben de şok oldum.)
• Chrome - x
• Cesur - x
• Opera - x
• IE - (lol, uzunluk birimi olmadan çalışır ancak bir birimle çalışmaz.)

GÜNCELLEME 2019

Chrome'un son sürümleri nihayet bu sorunu çözmüş gibi görünüyor, ancak diğer tarayıcılar hala düzeltmedi.

Chrome Ver 74'te test edildi ve çalışıyor.