html - 为什么 flex-direction 列在这里不起作用？

Question

我试图让我的输入相互堆叠以用于移动 View ，但 flex-direction:column; 似乎无法解决问题。

.sign-up{
    display:flex;
    justify-content: center;
    align-items: center;
}

.sign-up-wrap{
    display:flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 655px){
  input[type=text], input[type=email], .btn {
    flex-direction: column;
  }
}

<div class="sign-up-wrap">
    <div class="sign-up">
      <input type="text" placeholder="What's your name?"/>
      <input type="email" placeholder="What's your email?"/>
    </div>
</div>

Answer 1

flex-direction: column; 必须应用于 flex 容器(即 .sign-up)，而不是 flex 元素本身。

(我在代码段中将媒体查询更改为 800px min 以立即显示结果)

.sign-up{
    display:flex;
    justify-content: center;
    align-items: center;
}

.sign-up-wrap{
    display:flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 800px){
  .sign-up {
    flex-direction: column;
  }
}

<div class="sign-up-wrap">
    <div class="sign-up">
      <input type="text" placeholder="What's your name?"/>
      <input type="email" placeholder="What's your email?"/>
    </div>
</div>