如何移除Flex换行元素之间的右侧间隙？

问题描述 #

当第一个Flex子项内的文本换行时，两个Flex元素（绿色容器与蓝色方块）之间出现了水平间隙。尝试过flex-basis、margin-right、flex-shrink:0等方法均无效，如何消除该间隙？

渲染效果

代码示例 #

CSS代码

.container {
  display: flex;
}

.child-container {
  display: flex;
  flex-wrap: wrap;
  background: green;
  color: white;
}

.color-block {
  background-color: blue;
  width: 0.5rem;
}

HTML代码

<div class="container">
  <div class="child-container">
    <div>← 上一篇文章：</div>
    <div>一个很长的文章标题。一个很长的文章标题</div>
  </div>
  <div class="color-block"> </div>
</div>

解决方案 #

给左侧的.child-container添加flex: 1属性，让它占据容器的剩余水平空间，蓝色方块就会紧贴绿色容器，彻底消除间隙：

修改后的CSS代码：

.container {
  display: flex;
}

.child-container {
  display: flex;
  flex-wrap: wrap;
  background: green;
  color: white;
  flex: 1; /* 新增属性 */
}

.color-block {
  background-color: blue;
  width: 0.5rem;
}

原理说明 #

默认状态下，Flex子项的flex-grow值为0，不会主动占据容器的剩余空间。当左侧容器内的文本换行后，它的宽度仅能容纳换行后的内容，容器剩余的空白空间就形成了视觉上的间隙。添加flex:1后，flex-grow被设置为1，左侧容器会自动填满容器的剩余水平空间，右侧的蓝色方块自然就紧贴过来了。

内容的提问来源于stack exchange，提问作者Danny I Tan Lin