Как мы все знаем, 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
? Я не понимаю, что это значит, и ничего не получаю, когда гулю.
Ответы:
Вот объяснение:
https://www.w3.org/TR/css-flexbox-1/#flex-common
Следовательно
flex:1
, эквивалентноflex: 1 1 0
источник
flex
ко всем детям, на самом деле имеет значениеflex: 1 ? 0;
, где "?" может быть что угодно, это не имеет значенияwhat does flex:1 mean?
он открыт для интерпретации. Операция не требует спецификации, только того, что происходит. К сожалению, Chrome сейчас является самым популярным браузером, и требуется поддержка. Я сам не являюсь поклонником или пользователем Chrome!flex: 1
означает следующее:источник
flex: 1
значит1 1 0
... но в IE это так1 1 0px
1 1 0
и1 1 0px
эквивалентны. Просто IE поддерживает только тот, у кого есть модуль.1 1 0px
и1 1 0
эквивалентны?flex-basis
содержимое игнорируется, а размер элемента зависит от егоflex-grow
/flex-shrink
.БЫТЬ ОСТОРОЖЕН
В некоторых браузерах:
flex:1;
не равноflex:1 1 0;
flex:1;
=flex:1 1 0n;
(где n - единица длины).Ключевым моментом здесь является то, что для гибкой основы требуется единица длины .
В 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;
На первый взгляд это может показаться нормальным, если примененный модуль контейнера вложен; ожидать неожидаемое!
Попробуйте этот пример в ХРОМЕ
СОВМЕСТИМОСТЬ
Следует отметить, что это не удается, потому что некоторые браузеры не соответствуют спецификации .
Браузеры, использующие полную спецификацию гибкости:
ОБНОВЛЕНИЕ 2019
Последние версии Chrome, похоже, наконец-то устранили эту проблему, но другие браузеры до сих пор этого не сделали.
Протестировано и работает в Chrome версии 74.
источник
flex: 1
то же самоеflex: 1 1 0
. В вашем примере, если вы удалите.Wrap
класс в.Flex110x,.Flex1, .Flex110, .Wrap
правиле, работает должным образом.flex:1 1 0n;