为什么所有product-card未全部处于list-wrapper内且无法向右流动排列

核心原因说明 #

• 第二个product-card未被list-wrapper容器包裹：是HTML结构嵌套错误导致。你写的代码中list-wrapper在包裹完第一个商品卡片后就提前闭合了，第二个卡片被放在了list-wrapper的同级位置，自然不会被容器识别。同时还存在标签嵌套顺序错误的问题：<ol>标签在第一个product-card内部开启，闭合标签却放在了最外层div的尾部，完全不符合HTML语法规范，多余的<ol>标签也没有对应的<li>子元素，属于无效代码。
• product-card没有向右流动排列：有两个直接原因
  1. 第二个卡片根本不在flex容器list-wrapper内部，不会遵循flex布局的排列规则
  2. 你CSS代码中写的left-margin是无效属性，正确写法为margin-left，不过该属性不影响flex排列逻辑，只要把所有卡片都放到容器内即可自动实现横向流动排列效果
• div放置位置确实存在问题：除了容器提前闭合的错误，无效的ol标签嵌套也属于结构错误，完全可以删除。

修正后的代码示例 #

HTML 结构 #

<div>
  <div class="list-wrapper">
    <div class="product-card">
      <div class="wrapper">
        <div class="product-name">Product Name</div>
        <div class="product-basic-description">Comes in many colors and sizes</div>
        <div class="product-price">300.00 $</div>
        <div class="product-image"><img src="" alt="{{ image-description }}"></div>
      </div>
    </div>
    <div class="product-card">
      <div class="wrapper">
        <div class="product-name">Product Name</div>
        <div class="product-basic-description">Comes in many colors and sizes</div>
        <div class="product-price">300.00 $</div>
        <div class="product-image"><img src="" alt="{{ image-description }}"></div>
      </div>
    </div>
  </div>
</div>

CSS 样式（仅修正无效属性） #

.list-wrapper {
  display: inline-flex;
  flex-wrap: wrap;
  margin-left: 5em;
  border: 2px solid grey;
  justify-content: space-evenly;
  width: 100%;
}

.product-card {
  display: flex;
  border: 1px dotted grey;
  margin: 20px 10px 20px 10px;
  padding: 5px;
  width: 30%;
  height: 200px;
}

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