Почему flex-element так себя ведёт?

Question

[Алиса Якубова]

Почему пятый flex-элемент меньше, чем я ему задала, и почему он не переходит на следующую строку, когда я задала функцию wrap? Детали ]вы сможете увидеть на скриншоте. Благодарю.

Comments

[Максим Тимофеев]

Код на скриншоте? Серьезно?
Вот тут удобно:
https://jsfiddle.net

Детали ]вы сможете увидеть на скриншоте

Вы забыли дописать "если у Вас есть бинокль и идеальное зрение"

[Максим]

Максим Тимофеев, на фотку кликни - она увеличится - но о jsfiddle я не спорю

[Максим Тимофеев]

Максим Ленский, увеличится до читаемых размеров на любом экране? У меня 15' ноут, там нихрена не видно у увеличенном состоянии. Можно конечно скачать фото и открыть, но мне кажется ответ больше автору нужен, а не нам. Так что пусть оформит как для людей.

[Максим]

Максим Тимофеев, а если ПКМ и открыть в новой вкладке ....у меня 24 дюйма и видно отлично всё

[Алиса Якубова]

Максим Тимофеев, Вы попали в меня своим юмором )))))))) ну уж извините))) новичкам всё прощается)

Answer 1

[Антон Спирин]

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

На сколько вырастет пятый блок при заданных ему значениях

grow = whiteSpace / (4 * 1 + 1 * 5) * 5;

где whiteSpace - свободное пространство, не занятое элементами.

Советую получше изучить спецификацию. Хороший ее разбор на примерах вы можете найти в книге Новая Большая Книга CSS

Comments

[Алиса Якубова]

Благодарю Вас!

Answer 2

[snap44]

flex-grow странный. Так ли это?