Question

我的这个表单连续有四个输入元素（在桌面视图中）。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

的媒体查询

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

默认情况下，弹性项目排成一行。 Flex容器的初始值为flex-direction: row。

切换到flex-direction: column是垂直堆叠项目的一种好方法。 another answer已涵盖此方法。

另一种方法是启用flex-wrap并为每个输入width: 100%。

这样每行只允许一个输入，强制后续输入换行。

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