如何手动覆盖指定元素的flex属性实现自定义页面布局

给#Why_choose设置display: flex后，flex默认主轴为水平方向，所有直接子元素（<h1>和3个内容<div>）都会成为flex子项，沿水平方向依次排列，和预期的上下分层布局冲突。

最高效、可维护性最好的方案是语义结构分层+嵌套flex布局，不需要使用绝对定位这类脱离文档流的hack写法，后续改样式、做响应式适配的成本极低：

• 调整HTML结构：新增一个通用容器包裹3个内容模块，让<h1>和内容容器作为#Why_choose的两个直接子元素，天然形成上下两层结构
• 外层#Why_choose设置纵向flex布局，让标题、内容容器沿垂直方向排列，同时配置水平居中规则
• 内层内容容器设置横向flex布局，让3个内容模块水平并排，通过gap控制模块间距

修改后完整代码 #

CSS代码 #

/* Why choose Section */
#Why_choose{
  height: 800px;
  background: #121212; /* 原代码写的#12121为5位无效十六进制色值，已修正为6位 */
  display: flex;
  flex-direction: column; /* 将flex主轴改为垂直方向，直接子元素上下排列 */
  align-items: center; /* 所有直接子元素水平居中 */
  padding: 40px 20px;
  box-sizing: border-box;
  gap: 60px; /* 控制标题和内容区的垂直间距 */
}

#Why_choose h1{
  color: white;
  margin: 0;
}

#Why_choose h2{
  color: #e50914;
}

#Why_choose p{
  color: white;
}

#Why_choose img{
  width: 50%;
}

/* 新增内容容器样式 */
.feature-wrap {
  display: flex;
  width: 100%;
  max-width: 1200px;
  justify-content: space-between;
  gap: 20px; /* 控制三个内容模块之间的水平间距 */
}

.feature-wrap > div {
  flex: 1; /* 三个内容模块等宽分配空间 */
  text-align: center;
}

HTML代码 #

<section id="Why_choose">
    <h1>Why choose Snap Smile Veneers</h1>
    <!-- 包裹三个内容模块的容器 -->
    <div class="feature-wrap">
      <div class="invisible">
        <img src="images/random_img.jpg">
        <h2>we invisible</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing
           elit, sed do eiusmod tempor incididunt ut labore et
           dolore magna aliqua. Ut enim ad minim veniam</p>
      </div>
      <div class="comfortable">
        <img src="images/random_img.jpg">
        <h2>we comfortable</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing
           elit, sed do eiusmod tempor incididunt ut labore et
           dolore magna aliqua. Ut enim ad minim veniam</p>
      </div>
      <div class="workHome">
        <img src="images/random_img.jpg">
        <h2>we work from home</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing
           elit, sed do eiusmod tempor incididunt ut labore et
           dolore magna aliqua. Ut enim ad minim veniam</p>
      </div>
    </div>
</section>

如果不想调整现有HTML结构，也可以通过flex-wrap配合宽度设置实现效果，但结构分层不清晰，后期新增内容时容易出现布局错乱：

#Why_choose{
  /* 保留原有样式，新增以下属性 */
  flex-wrap: wrap;
  justify-content: center;
}
#Why_choose h1{
  /* 保留原有样式，新增以下属性 */
  width: 100%;
  text-align: center;
}
#Why_choose > div {
  width: calc(33.33% - 20px);
  margin: 0 10px;
}

预期效果参考：

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