解决flex容器与人工换行导致的行高或间距问题

你遇到的换行处额外间距，是因为Flex容器的gap属性会作用于所有flex项之间——包括你添加的.linebreak空元素。这个换行元素作为独立的flex项，会在它与前后的flex-item之间各产生一个gap间距，导致换行处的总间距变成了两倍的gap值，远大于正常行之间的间距。

移除额外的.linebreak元素，改用给需要强制换行的元素添加margin-right: 100%的方式，强制后续元素换行。这种方式不会引入额外的flex项，自然也就不会产生多余的gap间距，同时保留Flex布局的垂直居中、对齐方式等特性。

修改后的代码 #

CSS #

.outer-container {
  height:200px;
  width:200px;
}

.flex-container {
  display:flex;
  gap:.2em;
  font-size:20px;
  width:100%;
  height:100%;
  flex-wrap:wrap;
  align-content:center;
  justify-content:center;
}

.flex-item {
  background:red;
  padding:2px;
}

/* 新增强制换行类 */
.break-after {
  margin-right: 100%;
}

HTML #

<div class="outer-container">
<div class="flex-container">
  <div class="flex-item">Hi</div>
  <div class="flex-item">There</div>
  <div class="flex-item break-after">How</div> <!-- 添加换行类 -->
  <div class="flex-item">Are</div>
  <div class="flex-item">You</div>
  <div class="flex-item">Everyone</div>
  <div class="flex-item">Here</div>
  <div class="flex-item">is Fine</div>
</div>
</div>

如果需要多处强制换行，或者不想给元素加类，也可以用伪元素实现（适合固定位置换行场景）：

/* 在指定位置插入换行伪元素 */
.flex-container .flex-item:nth-child(3)::after {
  content: "";
  flex-basis: 100%;
  height: 0;
  order: 1;
}
.flex-container .flex-item:nth-child(n+4) {
  order: 2;
}

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