Есть ли разница между установкой max-width или width на гибкий элемент вместо flex-basis?
Является ли это "точкой прерывания" для свойств flex-grow/shrink?
И когда я устанавливаю flex-wrap: wrap, как браузер решает, в какой момент переместить элемент в новую строку? Это по их ширине или "гибкой основе"?
Пример: http://jsfiddle.net/wP5UP/
Последние два блока имеют одинаковый flex-basis: 200px, но только один из них перемещается вниз, когда окно находится между 300px и 400px. Почему?
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 в той же строке.