Мы все знаем, что свойство flex является сокращением для свойств flex-grow, flex-shrink и flex-basis based. И его значение по умолчанию 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 0. Делает гибкий элемент гибким и устанавливает гибкость основы на ноль, в результате чего элемент, который получает определенную долю свободного места в гибком контейнер. Если все элементы в контейнере 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-based требуется единица длины.
Например, в Chrome flex:1 и flex:1 1 0 дают разные результаты. В большинстве случаев может показаться, что flex:1 1 0; работает, но давайте рассмотрим, что на самом деле происходит:
Гибкая основа игнорируется, применяются только flex-grow и flex-shrink.
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 CSS указывает, как элемент гибкости будет расти или уменьшаться, чтобы соответствовать пространству, доступному в его контейнере гибких дисков. Это сокращенное свойство, которое устанавливает гибкость, гибкость и гибкость.
/* Basic values */
flex: auto;
flex: initial;
flex: none;
flex : 2;
/* Два значения: flex-grow | flex-shrink */
flex: 1 1;
/* Три значения: flex-grow | гибкая термоусадочная пленка | flex-basis */
flex: 1 1 10%;
авто
Элемент имеет размер в зависимости от его свойств ширины и высоты, но растет, чтобы поглотить любое дополнительное свободное пространство в контейнере гибкого диска и сжимается до минимального размера, чтобы он соответствовал контейнеру. Это эквивалентно установке "flex: 1 1 auto".
начальная
Это значение по умолчанию. Элемент имеет размер в зависимости от его свойств ширины и высоты. Он сжимается до минимального размера, чтобы соответствовать контейнеру, но не растет, чтобы поглотить лишнее свободное пространство в гибком контейнере. Это эквивалентно установке "flex: 0 1 auto".
ни один
Элемент имеет размер в зависимости от его свойств ширины и высоты. Он полностью негибкий: он не сжимается и не растет по сравнению с гибким контейнером. Это эквивалентно установке "flex: 0 0 auto".
Для меня самым простым ответом, который имел больше смысла, были сами документы React Native FlexBox. Я видел, как мой коллега делал это <View style={{ flex: 1/4}}> Я запутался, я прочитал об этом по этой ссылке. http://facebook.github.io/react-native/docs/flexbox.html Надеюсь, это кому-нибудь поможет.