Как заставить столбцы разбиваться на строки с помощью flexbox?

У меня есть эта форма с четырьмя входными элементами в строке (на рабочем столе).

Может ли кто-нибудь сказать мне, как заставить эти четыре входных элемента разбиваться на строки, когда ширина экрана становится ниже, скажем, 680 пикселей?

form { display: flex; } input { width: 25%; } 
 

Используйте медиа-запрос с точкой останова 680px и flex-direction:column;

 form { display: flex; } @media screen and (max-width: 680px) { form { flex-direction: column; } } 
 

По умолчанию гибкие элементы выстраиваются в ряд подряд. Начальное значение на гибком контейнере является flex-direction: row .

Переключение на flex-direction: column является одним из хороших способов для укладки элементов по вертикали. Этот метод уже рассмотрен в другом ответе .

Другим методом было бы включить flex-wrap и дать каждому входному width: 100% .

Это позволит использовать только один вход для каждой строки, заставляя последующие входы переноситься.

 form { display: flex;} input { width: 25%; } @media ( max-width: 680px ) { form { flex-wrap: wrap; } input { width: 100%; } }