Ответ 1
flex-basis
позволяет указать начальный/начальный размер элемента, прежде чем вычислять все остальное. Это может быть либо процент, либо абсолютное значение.
Тем не менее, не точка прерывания для свойств flex-grow/shrink. Браузер определяет, когда следует обернуть элемент на основе того, будут ли начальные размеры элементов превышать ширину поперечной оси (в обычном смысле, то есть в ширине).
Основываясь на вашей скрипке, причина, по которой последний перемещается в окно, состоит в том, что ширина родителя полностью занята предыдущими братьями и сестрами - и когда вы разрешаете контент обертывать, элементы, которые не вписываются в первая строка попадает в следующую строку. Поскольку flex-grow
является ненулевым значением, он просто растягивается, чтобы заполнить все пробелы, оставшиеся во второй строке.
Смотрите демонстрационный скрипт (измененный с вашего).
Если вы посмотрите на скрипку, я изменил для последнего элемента объявление нового размера:
.size3 {
flex: 0 1 300px;
}
Вы поймете, что элемент измеряет 300 пикселей по желанию. Однако, когда вы настраиваете свойство flex-grow, чтобы его значение превышало 0 (см. Пример), он будет растягиваться, чтобы заполнить строку, которая является ожидаемым поведением. Поскольку в своем новом контексте строки он не имеет братьев и сестер для сравнения, целое число от 1 до бесконечности не будет влиять на его размер.
Следовательно, flex-grow
можно рассматривать как это:
-
0
: (Значение по умолчанию) Не растягивайте. Либо размер по размеру содержимого элемента, либо подчинятьсяflex-basis
. -
1
: растянуть. -
≥2
(целое число n): растянуть. Например, будет n раз больше других элементов сflex-grow: 1
в той же строке.