Чтобы заставить элемент div перейти на следующую строку в гибком контейнере, вы можете использовать несколько методов. Вот некоторые из них:

Метод 1: использование свойства «flex-wrap»
Вы можете установить для свойства «flex-wrap» значение «wrap» в гибком контейнере. Это позволит гибким элементам переноситься на следующую строку, когда в контейнере недостаточно места. Вот пример:

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

Метод 2: использование свойства «flex-basis».
Вы можете указать фиксированную или процентную ширину для гибких элементов, используя свойство «flex-basis». Это приведет к автоматическому переносу элементов на следующую строку, когда ширины контейнера будет недостаточно для их размещения. Вот пример:

.container {
  display: flex;
}
.item {
  flex-basis: 200px; /* or any desired width */
}

Метод 3. Использование медиазапросов
Вы можете использовать медиазапросы, чтобы указать различное гибкое поведение при разных размерах экрана. Например, вы можете установить для гибкого контейнера направление «столбец» на небольших экранах, что автоматически переместит элементы на следующую строку. Вот пример:

.container {
  display: flex;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

Это всего лишь несколько способов заставить элемент div перейти на следующую строку в гибком контейнере. Вы можете выбрать тот, который соответствует вашим конкретным требованиям к макету.