Какие именно наборы свойств flex-based?

Question

Есть ли разница между настройками max-width или же width согнуть предмет вместо flex-basis?

Это "переломный момент" для flex-grow/shrink свойства?

И когда я установил flex-wrap: wrap как браузер решает в какой момент переместить элемент вниз на новую строку? Это в соответствии с их шириной или "гибкой основой"?

Пример: http://jsfiddle.net/wP5UP/ Последние два поля имеют одинаковые flex-basis: 200pxТем не менее, только один из них перемещается вниз, когда окно находится между 300px и 400px. Зачем?

Answer 1

flex-basis позволяет указать начальный / начальный размер элемента, прежде чем что-либо еще будет вычислено. Это может быть процент или абсолютное значение.

Это, однако, не предел для гибких, растущих / усадочных свойств. Браузер определяет, когда обернуть элемент, на основе того, превышают ли начальные размеры элементов ширину поперечной оси (в обычном смысле это ширина).

Основываясь на вашей скрипке, причина, по которой последний перемещается вниз по окну, заключается в том, что ширина родительского элемента полностью занята предыдущими братьями и сестрами - и когда вы разрешаете перенос содержимого, элементы, которые не помещаются в первой строке, получают подтолкнул к следующему ряду. поскольку flex-grow это ненулевое значение, оно просто растянется, чтобы заполнить все пробелы, оставшиеся во втором ряду.

Смотрите демо скрипку (модифицировано у вас).

Если вы посмотрите на скрипку, я изменил для последнего элемента новое объявление размера:

.size3 {
  flex: 0 1 300px;
}

Вы поймете, что размер элемента составляет 300 пикселей, как и предполагалось. Однако, когда вы настраиваете свойство flex-grow так, что его значение превышает 0 ( см. Пример), оно растягивается, чтобы заполнить строку, что является ожидаемым поведением. Поскольку в его новом контексте строки у него нет родных элементов для сравнения, целое число от 1 до бесконечности не повлияет на его размер.

Следовательно, flex-grow можно увидеть как это:

• 0: (Значение по умолчанию) Не растягивать. Либо размер по ширине содержимого элемента, либо подчиняться flex-basis,
• 1: Растянуть
• ≥2 (целое число n): растянуть. Будет в n раз больше других элементов flex-grow: 1 в том же ряду, например.

Answer 2

Хорошая статья https://gedd.ski/post/the-difference-between-width-and-flex-basis/

flex-base: размер элементов flex перед их помещением в контейнер flex. Это идеальный или гипотетический размер предметов. Но flex-base - это не гарантированный размер! Как только браузер помещает элементы в их гибкий контейнер, все меняется. Зачастую во флекс-контейнере не хватает места или лишнего пространства после того, как все значения из его элементов складываются.