输入字段不响应显示flex

Question

我有一组输入字段，如下所示：

​

.input-set {
  display: flex;
  align-items: center;
}

<div class="input-set">
  <div class="group-1">
    <input class="input" />
    <input class="input" />
    <input class="input" />
  </div>

  <div class="group-2">
    <input class="input" />
    <input class="input" />
    <input class="input" />
  </div>

  <div class="group-3">
    <input class="input" />
    <input class="input" />
    <input class="input" />
  </div>
</div>

​

但是，三个输入域的集合仍然水平显示。我已经将display: flex;添加到输入分组中，但它仍然水平显示。

Answer 1

输入不会受到display flex的影响，因为它们不是flex元素上的直接子元素。对于响应flex布局的输入，将display flex添加到group-1、group-2、group-3

Answer 2

您是否正在尝试使.group-n div (input的父目录)垂直显示？如果是这样，那么将flex-direction: column;添加到您的.input-set类中。