CSS Flexbox布局异常：设置flex-direction: row后元素仍垂直排列

你的卡片无法按预期横向排列，核心是HTML结构错误和CSS语法/属性误用导致的，以下是具体修复方案：

1. 修正HTML结构错误 #

你在<ol class="cards">内嵌套了一个错误的<ol class"media">（缺少属性等号），这会让flex容器.cards的直接子元素变成另一个列表，而非.card项，彻底破坏了布局逻辑。需要删除这个多余的嵌套列表：

修改后的核心HTML片段：

<ol class="cards">
    <li class="card">
        <div class="card-content">
            <h3>Step 1: Choosing a text editor</h3>
            <img src="images/step1.jpg" alt="Step 1">
            <p>Open a text editor like Notepad or VS Code to begin creating your webpage.</p>
            <br>
        </div>
    </li>
    <!-- 其余.card项保持不变 -->
</ol>

2. 修正CSS语法与属性 #

你的CSS存在语法错误和无效属性，调整后代码如下：

/*========================TUTORIAL START========================*/
.cards {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0; /* 清除有序列表默认左侧内边距，避免布局偏移 */
}
.card {
  list-style-position: inside; /* 让序号显示在卡片内部 */
  margin: 0 1.25em 0.3em 0; /* 保留原有的水平/垂直间距 */
  flex: 0 0 100%; /* 移动端默认占满整行 */
}
.card-content {
  border: 1px solid #b8860b;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 1em;
}

@media screen and (min-width: 40em){
  .card { flex: 0 0 50%; } /* 中等屏幕下卡片占半行 */
}

@media screen and (min-width: 60em) {
  .card { flex: 0 0 33.33%; } /* 大屏幕下卡片占1/3行 */
}
/*========================TUTORIAL END========================*/

关键修改说明： #

• 删除了开头多余的}和媒体查询缺失的闭合}，修复语法错误；
• 用flex: 0 0 宽度值替代直接设置width，更符合flex布局规范，确保卡片不会被意外拉伸/压缩；
• 移除了.card上不必要的display:flex，以及.card-content上无效的flex-direction:row（它未设置display:flex，且不是控制卡片横向排列的容器）；
• 给.cards添加padding-left:0清除有序列表默认内边距，避免卡片偏移；
• 将原.card-content的margin移到.card上，确保卡片之间的间距正确。

完成以上修改后，卡片会在不同屏幕尺寸下自动横向排列并换行，符合预期效果。

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