Flexbox布局问题：如何让文本气泡四边相互贴合

你的核心问题在于容器的固定高度限制和Flex布局的默认行对齐规则，导致垂直方向无法自然贴合，同时错误设置会让气泡高度冗余。以下是针对性修改方案：

关键调整点 #

• 移除容器的固定高度，让它自适应内容垂直高度，避免强制压缩或拉伸气泡
• 修正Flex容器的行对齐方式，消除垂直方向多余间隙
• 清除默认段落标签的外边距，让气泡紧密贴合

修改后的代码 #

CSS 部分 #

.fm-bubbles {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  /* 移除固定height，让容器自适应垂直高度 */
  align-content: flex-start; /* 让行顶对齐，消除垂直方向拉伸间隙 */
  gap: 4px; /* 可选：设置气泡间统一间距，替代margin更整洁 */
}
.fm-bubble {
  flex: 1 1 10%;
  height: max-content; /* 保留自适应内容高度 */
  border: 1px solid royalblue;
  border-radius: 5px;
  margin: 0; /* 清除p标签默认上下外边距 */
  padding: 4px 8px; /* 可选：增加内边距让文本更美观 */
}

HTML 部分（无需改动） #

<div class="fm-content">
  <div class="fm-bubbles">
    <p class="fm-bubble">Lorem, ipsum.</p>
    <p class="fm-bubble">lorem</p>
    <p class="fm-bubble">adsadad</p>
    <p class="fm-bubble">sss</p>
    <p class="fm-bubble">asdasda asdasda</p>
    <p class="fm-bubble">asss</p>
    <p class="fm-bubble">sss</p>
    <p class="fm-bubble">asdas asd</p>
    <p class="fm-bubble">adadaddd</p>
    <p class="fm-bubble">adadasd</p>
    <p class="fm-bubble">addd</p>
    <p class="fm-bubble">adadd</p>
    <p class="fm-bubble">ss</p>
  </div>
</div>

原理说明 #

1. 移除固定height：原容器的height:100px会强制容器高度，导致Flex行被拉伸或压缩，气泡无法按自身高度垂直贴合。
2. align-content: flex-start：Flex布局默认align-content: stretch，会把所有行拉伸填满容器高度，设置为flex-start后，行只会占据自身所需高度，垂直方向自然贴合。
3. gap属性：替代传统margin，更简洁控制气泡间水平和垂直间距，避免外边距叠加问题。
4. 清除p标签默认margin：浏览器默认给p标签设置上下外边距，会导致气泡间出现不必要的垂直间隙，必须清除。

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