Apa yang dimaksud dengan flex: 1?

Seperti yang kita semua tahu, flexproperti adalah singkatan untuk flex-grow, flex-shrink, dan flex-basisproperti. Nilai defaultnya adalah 0 1 auto, yang artinya

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

tapi saya perhatikan, di banyak tempat flex: 1digunakan. Apakah itu singkatan untuk 1 1 autoatau 1 0 auto? Saya tidak mengerti apa artinya dan saya tidak mendapatkan apa-apa saat mencari di Google.

Berikut penjelasannya:

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

flex: <positive-number>
Setara dengan flex: <positive-number> 1 0. Menjadikan item flex fleksibel dan menyetel basis flex ke nol, menghasilkan item yang menerima proporsi tertentu dari ruang kosong di container flex. Jika semua item dalam wadah fleksibel menggunakan pola ini, ukurannya akan proporsional dengan faktor fleksibel yang ditentukan.

Oleh karena flex:1itu setara denganflex: 1 1 0

flex: 1 berarti sebagai berikut:

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%.

HATI-HATI

Di beberapa browser:

flex:1; tidak samaflex:1 1 0;

flex:1;= flex:1 1 0n;(di mana n adalah satuan panjang).

• flex-grow: Angka yang menentukan seberapa banyak item akan berkembang dibandingkan dengan item fleksibel lainnya.
• flex-shrink Angka yang menentukan seberapa besar item akan menyusut relatif terhadap item fleksibel lainnya
• flex-basis Panjang item. Nilai hukum: "auto", "inherit", atau angka yang diikuti dengan "%", "px", "em" atau satuan panjang lainnya.

Poin kuncinya di sini adalah bahwa flex-basis membutuhkan satuan panjang .

Di Chrome misalnya flex:1dan flex:1 1 0menghasilkan hasil yang berbeda. Dalam kebanyakan keadaan, ini mungkin tampak flex:1 1 0;berfungsi tetapi mari kita periksa apa yang sebenarnya terjadi:

CONTOH

Basis fleksibel diabaikan dan hanya flex-grow dan flex-shrink yang diterapkan.

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

Sekilas ini mungkin tampak baik-baik saja, namun jika unit yang diterapkan dari wadah bersarang; mengharapkan yang tak terduga!

Coba contoh ini di CHROME

.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>

KESESUAIAN

Perlu dicatat bahwa ini gagal karena beberapa browser gagal mematuhi spesifikasi .

Browser yang menggunakan spesifikasi full flex:

• Firefox - ✓
• Edge - ✓ (Saya tahu, saya juga terkejut.)
• Chrome - x
• Berani - x
• Opera - x
• IE - (lol, ini berfungsi tanpa satuan panjang tetapi tidak dengan satuan panjang.)

PEMBARUAN 2019

Versi terbaru Chrome tampaknya akhirnya memperbaiki masalah ini tetapi browser lain masih belum.

Diuji dan berfungsi di Chrome Ver 74.