为什么flex-direction列不在这里工作？

Question

我正在尝试将我的输入堆叠在彼此上面以进行移动视图，但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;必须应用于弹性容器（即.sign-up），而不是灵活项目本身。

（我在代码段中将媒体查询更改为800px分钟以立即显示结果）

.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>