Что значит "гибкий": 1 имеете в виду?

мы все знаем, свойство flex является сокращением для flex-grow,flex-shrink и flex-basis свойства. И его значение по умолчанию -0 1 auto. Это значит:

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

но я заметил, во многих местах есть. Это сокращение для 1 1 auto или 1 0 auto? Я не могу понять, что это значит? Я ничего не ищу в гугле.

4 57
css css3 flexbox

4 ответа:

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

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

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

flex:1 Это эквивалентно flex: 1 1 0
48

flex: 1 означает следующее:

flex-grow : 1; // this means that the div will grow in same proportion as the window-size
flex-shrink : 1; // this means that the div will shrink in same proportion as the window-size 
flex-basis : 0; // this means that 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%.
49

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

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

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

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

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

ключевым моментом здесь является то, что flex-basis требует длина блока.

в 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;

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

попробуйте этот пример в 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>

совместимость

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

  • Firefox -✓
  • Edge -✓
  • Chrome-x
  • храбрый-x
  • Opera-x
  • IE -(lol, он работает без единицы длины, но не с одним.)
22

гибкий CSS свойство определяет, как элемент гибкого трубопровода будет расти или уменьшаться с тем, чтобы соответствовать доступное пространство в его контейнер. Это свойство стенографии, которое устанавливает flex-grow, flex-shrink и flex-basis.

/* Basic values */
flex: auto;
flex: initial;
flex: none;
flex : 2;

/ * два значения: flex-grow / flex-shrink */

flex: 1 1;

/ * три значения: flex-grow / flex-shrink / flex-basis */

flex: 1 1 10%;

авто

номенклатура размеров по ширине и height , но растет, чтобы поглотить любое дополнительное свободное пространство в контейнере flex, и сжимается до минимального размера, чтобы соответствовать контейнеру. Это эквивалентно настройке "flex: 1 1 auto".

нач

Это значение по умолчанию. Номенклатура размеров по ширине и height. Он сжимается до минимального размера, чтобы соответствовать контейнеру, но не растет, чтобы поглотить дополнительное свободное пространство в контейнере flex. Это эквивалентно настройке " flex: 0 1 автоматический."

нет

номенклатура размеров по ширине и height. Он полностью негибкий: он не сжимается и не растет по отношению к гибкому контейнеру. Это эквивалентно настройке "flex: 0 0 auto".

7