Что означает flex: 1?

131

Как мы все знаем, 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? Я не понимаю, что это значит, и ничего не получаю, когда гулю.

Md. Rafee
источник
1
цитируется w3schools.com «Свойство flex является сокращением для свойств flex-grow, flex-shrink и flex-basic»
Имран Али

Ответы:

88

Вот объяснение:

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

flex: <positive-number>
Эквивалентно flex: <positive-number> 1 0. Делает гибкий элемент гибким и устанавливает для гибкого базиса ноль, в результате чего элемент получает указанную долю свободного пространства в гибком контейнере. Если все элементы в гибком контейнере используют этот шаблон, их размеры будут пропорциональны указанному коэффициенту гибкости.

Следовательно flex:1, эквивалентноflex: 1 1 0

Данут Пралеа
источник
11
Flex: 1; не равно flex: 1 1 0; см. мой ответ ниже, чтобы понять, почему.
DreamTeK
Замечание: я думаю, что когда вы применяете то же самое flexко всем детям, на самом деле имеет значение flex: 1 ? 0;, где "?" может быть что угодно, это не имеет значения
flen
@DreamTeK Только в браузерах, не соответствующих стандартам, например Chrome.
TylerH 07
1
@TylerH Правильно и отмечено в моем ответе, однако what does flex:1 mean?он открыт для интерпретации. Операция не требует спецификации, только того, что происходит. К сожалению, Chrome сейчас является самым популярным браузером, и требуется поддержка. Я сам не являюсь поклонником или пользователем Chrome!
DreamTeK
1
@TylerH Вот почему в моем ответе это говорится о том, что «Следует отметить, что это не удается, потому что эти браузеры не соответствуют спецификации». вместе со ссылкой на спек!
DreamTeK
101

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%.
Ринку Бхилота
источник
1
@CookieMonster Нет, flex: 1значит 1 1 0... но в IE это так1 1 0px
Асон
@LGSon, можно опустить единицу из базового значения так 1 1 0и 1 1 0pxэквивалентны. Просто IE поддерживает только тот, у кого есть модуль.
CookieMonster
@CookieMonster Я знаю, как работает Flexbox, я только что исправлял ваш первый комментарий, что неверно.
Асон
@LGSon, как flex: 1 означает 1 1 0px неправильно, когда 1 1 0pxи 1 1 0эквивалентны?
CookieMonster
2
@CookieMonster Они могут отображать то же самое, но не эквивалентны, так как при использовании безразмерного значения для flex-basisсодержимое игнорируется, а размер элемента зависит от его flex-grow/ flex-shrink.
Асон
78

БЫТЬ ОСТОРОЖЕН

В некоторых браузерах:

flex:1; не равноflex:1 1 0;

flex:1;= flex:1 1 0n;(где n - единица длины).

  • flex-grow: число, определяющее, насколько элемент будет расти относительно остальных гибких элементов.
  • flex-shrink Число, указывающее, насколько элемент будет сжиматься относительно остальных гибких элементов.
  • flex-base Длина предмета. Допустимые значения: «авто», «наследование» или число, за которым следует «%», «px», «em» или любая другая единица длины.

Ключевым моментом здесь является то, что для гибкой основы требуется единица длины .

В Chrome к примеру flex:1и flex:1 1 0дают разные результаты. В большинстве случаев может показаться, что flex:1 1 0;это работает, но давайте посмотрим, что происходит на самом деле:

ПРИМЕР

Основа Flex игнорируется и применяются только flex-grow и flex-shrink.

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

На первый взгляд это может показаться нормальным, если примененный модуль контейнера вложен; ожидать неожидаемое!

Попробуйте этот пример в ХРОМЕ

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

СОВМЕСТИМОСТЬ

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

Браузеры, использующие полную спецификацию гибкости:

  • Firefox - ✓
  • Эдж - ✓ (Знаю, я тоже был в шоке.)
  • Хром - x
  • Смелый - х
  • Опера - х
  • IE - (смеется, он работает без единицы длины, но не с ней.)

ОБНОВЛЕНИЕ 2019

Последние версии Chrome, похоже, наконец-то устранили эту проблему, но другие браузеры до сих пор этого не сделали.

Протестировано и работает в Chrome версии 74.

DreamTeK
источник
1
Когда значение равно 0, единица измерения не является обязательной. В спецификации сказано flex: 1то же самое flex: 1 1 0. В вашем примере, если вы удалите .Wrapкласс в .Flex110x,.Flex1, .Flex110, .Wrapправиле, работает должным образом.
Дайте ссылку, пожалуйста, я не могу найти в спецификации то, что вы говорите. Я ничего не придумал, мой ответ основан на спецификации
@Obsidian Вот ссылка: w3.org/TR/css-flexbox-1 Если вы перейдете к части для «сокращения», вы найдете: «flex: [positive-number] Эквивалентно flex: [positive-number] 1 0 ...
MikeB
1
@Toskan Для максимальной совместимости используйте полный синтаксисflex:1 1 0n;
DreamTeK
2
Спасибо, что указали на эту разницу, я не мог понять, откуда возникли мои проблемы. Получите награду.
Nit