How to get columns to break into rows with flexbox?

Question

I have this form with four input elements in a row (in desktop view).

Can anybody tell me how to get those four input elements to break into rows when the screen width g

Answer 1

By default, flex items line up in a row. An initial value on a flex container is flex-direction: row.

Switching to flex-direction: column is one good method for stacking items vertically. This method is already covered in another answer.

Another method would be to enable flex-wrap and give each input width: 100%.

This would allow only one input per row, forcing subsequent inputs to wrap.

form { display: flex;}

input { width: 25%; }

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

jsFiddle