如何使用flexbox将列分成多行？ [英] How to get columns to break into rows with flexbox?

问题描述

有人可以告诉我如何让这四个输入元素分解成行当屏幕宽度低于680px？

form {display： flex;} input {width：25％;}

< ;形式> < input type =text/> < input type =text/> < input type =text/> < input type =text/>< / form>

h2_lin>解决方案

使用断点为680px且 flex-direction：column;

方向：栏目; }

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

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>

解决方案

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>

这篇关于如何使用flexbox将列分成多行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！