Що означає флекс: 1?

Як ми всі знаємо, flexвластивість є узагальнюючим для flex-grow, flex-shrink, і flex-basisвластивості. Його значення за замовчуванням - це 0 1 auto, що означає

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

але я помітив, у багатьох місцях flex: 1використовується. Це скорочення для 1 1 autoабо 1 0 auto? Я не можу зрозуміти, що це означає, і нічого не отримую під час google.

Ось пояснення:

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

flex: <positive-number>
Equivelent to flex: <positive-number> 1 0. Робить flex елемент гнучким і встановлює основу flex у нуль, в результаті чого елемент, який отримує задану частку вільного простору в flex контейнері. Якщо всі елементи в контейнері flex використовують цю схему, їх розміри будуть пропорційні заданому коефіцієнту гнучкості.

Тому flex:1еквівалентноflex: 1 1 0

flex: 1 означає наступне:

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

БУДЬ ОБЕРЕЖНИЙ

У деяких браузерах:

flex:1; не дорівнюєflex:1 1 0;

flex:1;= flex:1 1 0n;(де n - одиниця довжини).

• гнучкий ріст: число, яке визначає, наскільки вироби виростуть відносно решти гнучких елементів.
• flex-shrink Кількість, яка визначає, наскільки зменшиться предмет відносно решти гнучких предметів
• флекс-основа Довжина виробу. Юридичні значення: "автоматично", "успадкувати" або число, за яким слідують "%", "px", "em" або будь-яка інша одиниця довжини.

Ключовим моментом тут є те, що на флекс-основі потрібна одиниця довжини .

Наприклад, у Chrome flex:1і flex:1 1 0дають різні результати. У більшості випадків може здатися, що flex:1 1 0;це працює, але давайте вивчимо, що насправді відбувається:

ПРИКЛАД

Основа гнучкості ігнорується, і застосовуються лише розгинання та згинання.

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

На перший погляд це може здатися нормальним, однак якщо застосована одиниця контейнера вкладена; очікувати несподіване!

Спробуйте цей приклад у 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>

СУМІДНІСТЬ

Слід зазначити, що це не вдається, оскільки деякі браузери не дотримуються специфікації .

Браузери, які використовують повну специфікацію flex:

• Firefox - ✓
• Edge - ✓ (Я знаю, я також був шокований.)
• Хром - х
• Хоробрий - х
• Опера - х
• IE - (lol, працює без одиниці довжини, але не з однією.)

ОНОВЛЕННЯ 2019 року

Останні версії Chrome, схоже, остаточно усунули цю проблему, але інші браузери досі не мають.

Тестували та працювали в Chrome Ver 74.