Как перенести Flex элемент на новую строку?

Для переноса элемента Flex на новую строку вам необходимо использовать свойство flex-wrap. По умолчанию, значение этого свойства равно nowrap, что означает, что элементы не будут переноситься на новую строку, а будет происходить их ужатие или обрезание. Если вы хотите, чтобы элемент Flex перенесся на новую строку, когда достигнут конец контейнера, вам следует установить значение свойства flex-wrap равным wrap.

Вот пример HTML и CSS кода, который покажет, как это сделать:

<div class="flex-container">
  <div class="flex-item">Элемент 1</div>
  <div class="flex-item">Элемент 2</div>
  <div class="flex-item">Элемент 3</div>
  <div class="flex-item">Элемент 4</div>
  <div class="flex-item">Элемент 5</div>
</div>

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  flex: 1 0 200px;
  margin: 10px;
  background-color: #e5e5e5;
  padding: 20px;
}

В данном примере .flex-container является контейнером flex, а .flex-item - его элементами. С помощью свойства flex-wrap: wrap; мы указываем, что элементы должны переноситься на новую строку при достижении конца контейнера.

Также здесь установлено свойство flex: 1 0 200px; для .flex-item, чтобы все элементы занимали одинаковую ширину, равную 200 пикселей, и чтобы они не растягивались или сжимались при изменении размеров контейнера.

Вы можете изменить значения этих свойств и добавить дополнительные стили, чтобы адаптировать внешний вид вашего Flex контейнера и его элементов в соответствии с вашими потребностями.

Это простой пример, но вы можете использовать свойство flex-wrap в сочетании с другими свойствами flex, чтобы создать более сложные и гибкие макеты с помощью Flexbox в HTML.