为.index-fifth-wrappers设置display:flex后，如何实现预期三栏布局？

原始代码 #

HTML代码 #

<div class="index-fifth">
  <div class="index-fifth-head">
    <h2>为什么选择我们？</h2>
    <h1>我们的优势</h1>
  </div>
  <div class="index-fifth-wrappers">
    <div class="index-fifth-wrapper-1">
      <div style="display: flex; gap: 1em; padding-top: 15px;">
        <i class="fa-solid fa-hospital"></i>
        <p>值得信赖</p>
      </div>
      <p style="margin-top: 40px;">MedConnect平台上的医疗顾问在注册时，都会经过官方资质确认与交叉核验。通过他们提供的相关医疗资质细节，MedConnect会认定其为可信顾问。</p>
    </div>
    <div class="index-fifth-wrapper-2">
      <div style="display: flex; gap: 1em; padding-top: 15px;">
        <i class="fa-solid fa-hospital"></i>
        <p>值得信赖</p>
      </div>
      <p style="margin-top: 40px;">MedConnect平台上的医疗顾问在注册时，都会经过官方资质确认与交叉核验。通过他们提供的相关医疗资质细节，MedConnect会认定其为可信顾问。</p>
    </div>
    <div class="index-fifth-wrapper-3">
      <div style="display: flex; gap: 1em; padding-top: 15px;">
        <i class="fa-solid fa-hospital"></i>
        <p>值得信赖</p>
      </div>
      <p style="margin-top: 40px;">MedConnect平台上的医疗顾问在注册时，都会经过官方资质确认与交叉核验。通过他们提供的相关医疗资质细节，MedConnect会认定其为可信顾问。</p>
    </div>
  </div>
</div>

CSS代码 #

.index-fifth-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 50px;
  gap: 1em;
  color: #704a1b;
}

.index-fifth-head h1 {
  color: #614124;
}

.index-fifth-wrappers {
  font-size: 17px;
  background-color: #ffdc84;
  padding: 20px;
  width: 450px;
  border-radius: 5px;
  color: #704a1b;
}

当前布局问题 #

• 未给.index-fifth-wrappers设置display:flex时，三个卡片垂直堆叠：
  
• 添加display:flex和justify-content: space-around后，卡片被挤压变形，内容无法正常展示：
  
• 想要实现的预期效果：三个卡片横向排列，每个卡片保持完整内容与样式：
  

调整方案 #

问题核心是父容器固定宽度过小，开启flex后子元素没有足够空间展示内容，按以下步骤修改：

1. 移除父容器的固定宽度，改用相对宽度适配不同屏幕；
2. 给每个子卡片设置弹性分配规则，让它们均分可用空间；
3. 给子卡片添加独立背景与内边距，区分层次并优化内容展示。

修改后的CSS代码：

.index-fifth-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 50px;
  gap: 1em;
  color: #704a1b;
}

.index-fifth-head h1 {
  color: #614124;
}

.index-fifth-wrappers {
  font-size: 17px;
  background-color: #ffdc84;
  padding: 20px;
  border-radius: 5px;
  color: #704a1b;
  display: flex;
  gap: 20px; /* 控制卡片间间距 */
  width: 90%; /* 相对宽度适配 */
  max-width: 1200px; /* 限制最大宽度避免过度拉伸 */
  margin: 0 auto; /* 容器居中 */
}

.index-fifth-wrappers > div {
  flex: 1; /* 让三个卡片均分父容器空间 */
  background-color: #fff;
  padding: 15px;
  border-radius: 5px;
}

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