Как сделать так, чтобы элементы li переносились на новую строку при достижении края окна?

Использовать что-то другое кроме ul, li не получится. Это кастомизация CMS. Нужно какие-то свойства задать, чтобы элементы переносились на новую строку, когда достигают границы окна, но какие именно? Уже многое перепробовал.
CodePen:

Исходный код

CSS
ul {
	display: flex;
}
li {
	margin: 0 16px 0 16px;
}

HTML
<ul>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
	<li>Lorem Ipsum</li>
</ul>
  • Вопрос задан
  • 2913 просмотров
Решения вопроса 1
h4mpy
@h4mpy
flex-wrap: wrap для ul
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@FlooJack
Можешь задать определённый размер блоку, например width: 50%; если li не переходить на следующую строку то тогда уже добавляешь flex-wrap: wrap;
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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