设置display:flex与flex-direction:column后仍横向排列，求排查

• 先确认选择器是否精准命中目标容器
  新手常犯的错误是class/id拼写错误，或者选择器层级不对。比如你写的是.card-container，但HTML里容器的class是card-wrap，那样式根本没生效。打开浏览器F12开发者工具，选中容器元素看Styles面板，检查display: flex和flex-direction: column是不是真的应用上了——要是没看到这俩属性，肯定是选择器错了。

• 检查有没有其他样式覆盖Flex属性
  比如容器被更高优先级的规则（比如ID选择器、内联样式）设置了flex-direction: row（默认值），或者display: block。比如你给容器加了内联样式<div class="card-container" style="flex-direction: row">，那外部CSS的column设置直接被忽略。还有可能是CSS里写了重复的规则，后面的覆盖了前面的。

• 看看子元素有没有破坏Flex布局
  如果子元素加了float: left或者position: absolute，会脱离Flex容器的控制，就算容器设置了column，子元素还是会横向飘着。把这些属性删掉就行。

• 举个常见错误的修正例子
  比如你的代码犯了选择器拼写错误：

  <div class="card-container">
    <div class="card">卡片1</div>
    <div class="card">卡片2</div>
  </div>
  
  <style>
    /* 错误：class名多了个s，没选中容器 */
    .card-containers {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    .card {
      width: 220px;
      height: 120px;
      border: 1px solid #ddd;
      padding: 10px;
    }
  </style>
  

  把.card-containers改成.card-container，卡片就会纵向排列了。

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