如何结合p类与Flexbox实现容器下方文本均匀排列及代码优化

一、实现文本与上方盒子精准对齐 #

原代码存在HTML结构错误（多余闭合标签、非法嵌套）以及布局逻辑不匹配的问题，以下是修正后的可运行代码，能让文本在盒子下方均匀排列且与上方盒子精准对齐：

修正后的HTML #

<div class="container">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

<div class="subtext-container">
  <div class="subtext-item">Wow !</div>
  <div class="subtext-item">Wow !</div>
  <div class="subtext-item">Wow !</div>
  <div class="subtext-item">Wow !</div>
</div>

修正后的CSS #

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 20px; /* 替代margin，更精准控制间距 */
  padding: 0 20px;
}

.square {
  flex: 1;
  background-color: white;
  border: solid #3882f6;
  border-radius: 8px;
  height: 150px;
}

.subtext-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 20px; /* 和上方容器gap一致，保证对齐 */
  padding: 10px 20px;
}

.subtext-item {
  flex: 1; /* 让文本块宽度与上方盒子匹配 */
  text-align: center;
}

二、代码优化细节 #

1. HTML结构修复

   • 移除原代码中多余的</div>，修复结构嵌套错误
   • 去掉<p>标签内嵌套<div>的非法结构（块级元素不能放在<p>内）
   • 删除无意义的差异化类名（如one/box1），统一用通用类名提升可维护性

2. CSS布局优化

   • 用gap替代.square的margin，避免margin叠加导致的间距混乱，布局更稳定
   • 移除.square中无效的flex-direction: column（该元素未设置display:flex，属性不生效）
   • 给两个容器添加padding，避免元素贴页面边缘
   • 给.subtext-item设置flex:1，确保每个文本块宽度与上方对应盒子完全匹配，对齐更精准

3. 可维护性提升

   • 可将重复的flex布局样式抽成通用类，例如：

     .flex-row-around {
       display: flex;
       justify-content: space-around;
       align-items: center;
       gap: 20px;
       padding: 0 20px;
     }
     

     然后给.container和.subtext-container添加这个类，减少代码冗余

内容的提问来源于stack exchange，提问作者Dr-Lupo