Tintin81 Tintin81 - 2 months ago 16
CSS Question

How to get columns to break into rows with flexbox?

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 gets below, say, 680px?



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

<form>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</form>




Answer

Use a media query with a breakpoint of 680px and flex-direction:column;

form {
  display: flex;
}
@media screen and (max-width: 680px) {
  form {
    flex-direction: column;
  }
}
<form>
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
</form>