@AliceYakubova
Я - новичок. С любовью отношусь к тому, что делаю.

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

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

5b460a7525ef3799427419.png
  • Вопрос задан
  • 155 просмотров
Решения вопроса 1
rockon404
@rockon404
Frontend Developer
flex-grow - это не размер. это свойство определяет, какую часть свободного пространства может занять контейнер, в соотношении с другими контейнерами.
На скриншоте видно, что свободного пространства элемент забирает пропорционально больше.
Перенос будет только тогда, когда элементы перестанут умещаться в строку. В вашем же случае, остается свободное пространство, которое распределяется между блоками.

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


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

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

Советую получше изучить спецификацию. Хороший ее разбор на примерах вы можете найти в книге Новая Большая Книга CSS
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
snap44
@snap44
Фыр!
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы