Flex Row布局异常求助：子元素始终呈纵向排列问题排查

我无论如何都无法让Flex Row布局生效，子元素始终呈现纵向排列。我已经将代码简化到最基础的结构，但问题依然存在。我原本认为Flex属性会从父元素继承，不清楚问题出在哪里。

原代码 #

CSS代码 #

/* Header Video Full Screen */

/* Header Video Full Screen Table/Word Box*/

/* Product Recommendations Box*/

.productFlexParent{
  display: flex;
  flex-direction: row;
  justify-content: center;
  max-width: 100%;
}

.productFlexChild{
  width: 30%;
}

.productFlexImage{
max-width: 100%;
}

HTML代码 #

<div>
  <!-- Header Video/Photo of Product -->
  <video>
    <source>
  </video>

  <!-- Computer Title Header and Configure Box if applicable -->
  <div>
  </div>
</div>
<div>
  <!-- 3D Rotator/Glam Video-->
</div>
<div>
  <!--Why buy from Auspec-->
</div>
<div>
  <!-- Bottom of page recommended specs/with toggle?-->

  <!-- Rounded Toggle switch -->
  <label class="switch">
    <input type="checkbox">
    <span class="slider round"></span>
  </label>

  <!--3 different models of build-->
  <div class="productFlexParent">
    <div class="productFlexChild">
      <img class="productFlexImage" src="https://umbrellacreative.com.au/wp-content/uploads/2020/01/hide-the-pain-harold-why-you-should-not-use-stock-photos-1024x683.jpg" alt="">
    </div> </div> <div class="productFlexParent">
    <div class="productFlexChild">
      <img class="productFlexImage" src="https://umbrellacreative.com.au/wp-content/uploads/2020/01/hide-the-pain-harold-why-you-should-not-use-stock-photos-1024x683.jpg" alt="">
    </div> </div> <div class="productFlexParent">
    <div class="productFlexChild">
      <img class="productFlexImage" src="https://umbrellacreative.com.au/wp-content/uploads/2020/01/hide-the-pain-harold-why-you-should-not-use-stock-photos-1024x683.jpg" alt="">
    </div> </div> 
  </div>

问题原因 #

核心错误是把每个子元素都放在单独的.productFlexParent容器里。Flex布局的逻辑是：只有父容器设置display:flex后，它的直接子元素才会成为flex项，遵循flex布局规则。现在每个.productFlexChild都有独立的flex父容器，每个容器仅包含一个子元素，因此每个容器单独占一行，视觉上呈现子元素纵向排列。

另外，Flex属性不会继承，父容器的flex设置只作用于直接子元素，不会传递给更深层级的元素。

修正方案 #

将所有.productFlexChild放入同一个.productFlexParent容器内，这样父容器的flex-direction: row就能让子元素横向排列。CSS代码无需修改，仅调整HTML结构：

修正后的HTML代码 #

<div>
  <!-- Header Video/Photo of Product -->
  <video>
    <source>
  </video>

  <!-- Computer Title Header and Configure Box if applicable -->
  <div>
  </div>
</div>
<div>
  <!-- 3D Rotator/Glam Video-->
</div>
<div>
  <!--Why buy from Auspec-->
</div>
<div>
  <!-- Bottom of page recommended specs/with toggle?-->

  <!-- Rounded Toggle switch -->
  <label class="switch">
    <input type="checkbox">
    <span class="slider round"></span>
  </label>

  <!--3 different models of build-->
  <div class="productFlexParent">
    <div class="productFlexChild">
      <img class="productFlexImage" src="https://umbrellacreative.com.au/wp-content/uploads/2020/01/hide-the-pain-harold-why-you-should-not-use-stock-photos-1024x683.jpg" alt="">
    </div>
    <div class="productFlexChild">
      <img class="productFlexImage" src="https://umbrellacreative.com.au/wp-content/uploads/2020/01/hide-the-pain-harold-why-you-should-not-use-stock-photos-1024x683.jpg" alt="">
    </div>
    <div class="productFlexChild">
      <img class="productFlexImage" src="https://umbrellacreative.com.au/wp-content/uploads/2020/01/hide-the-pain-harold-why-you-should-not-use-stock-photos-1024x683.jpg" alt="">
    </div>
  </div> 
</div>

补充说明 #

• 确保父容器.productFlexParent没有被其他CSS规则干扰（比如display:block覆盖display:flex）
• 若子元素横向排列后出现换行，可给父容器添加flex-wrap: nowrap（默认值为nowrap，除非主动修改）
• 子元素width:30%的设置合理，三个元素总宽度90%，剩余空间由justify-content:center分配在两侧，保证居中效果

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