为何flex-direction: column在移动端布局中不生效？

嘿，我一眼就看出问题啦——你把flex-direction: column用错地方啦！😉

问题根源 #

flex-direction是flex容器专属属性，只有给设置了display: flex的元素添加才会生效。你现在把它直接加在了input和.btn这些子元素上，自然不会有效果。你的输入框和按钮的父容器.sign-up才是真正的flex容器，要改的是它的方向。

修改后的代码 #

.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){
  /* 给父容器.sign-up设置纵向排列 */
  .sign-up {
    flex-direction: column;
    /* 可选：添加间距避免元素挤在一起 */
    gap: 12px;
  }
  /* 可选：让输入框和按钮占满容器宽度，适配移动端 */
  input[type=text], input[type=email], .btn {
    width: 100%;
    box-sizing: border-box; /* 避免padding撑大宽度 */
  }
}

对应的HTML结构保持你的原有结构即可：

<div class="sign-up-wrap">
  <div class="sign-up">
    <input type="text" placeholder="What's your name?"/>
    <input type="email" placeholder="Your email address"/>
    <button class="btn">Sign Up</button>
  </div>
</div>

效果说明 #

修改后，当屏幕宽度小于655px时：

• .sign-up容器的排列方向变为纵向，里面的输入框和按钮会自动堆叠
• gap属性让元素之间保持合适的间距，提升移动端体验
• width:100%配合box-sizing: border-box确保输入框不会超出容器宽度

内容的提问来源于stack exchange，提问作者codfish555