CODEWITHSUNDEEP
htmlcssflexbox
Tintin81
Tintin81

Reputation: 10207

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>

Upvotes: 1

Views: 371

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 370993

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%; }
}
<form>
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
</form>

jsFiddle

Upvotes: 1

zer00ne
zer00ne

Reputation: 43863

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>

Upvotes: 3

Related Questions