Flex布局下如何将图标紧邻放置在可换行文本右侧并消除多余空隙

问题的核心原因是你用错了flex属性的参数顺序，flex的合法参数顺序为flex: <flex-grow> <flex-shrink> <flex-basis>，原写法不符合语法规则，导致文本块宽度计算异常，出现多余空隙。

修正后的完整CSS代码 #

.wrapper {
  width: 25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.longerText {
  background-color: beige;
  /* 允许文本块放大、缩小，基础宽度由内容决定，占满容器剩余可用空间 */
  flex: 1 1 auto;
}

.smallImage {
  /* 禁止图标缩放，固定尺寸 */
  flex: 0 0 1.5rem;
  background-color: lightskyblue;
  border-radius: 50%;
  /* 让图标内的i文字垂直+水平居中 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
}

修改说明 #

• 修正了flex属性的参数顺序，.longerText设置flex: 1 1 auto后，会自动填充容器内除图标外的所有剩余宽度，多余空白不会出现在文本与图标之间
• 给.smallImage新增了flex布局属性，保证内部的"i"标识也能完全垂直居中
• 保留了原有的gap: 0.5rem配置，文本和图标间距刚好符合要求，原有的align-items: center保证图标和多行文本整体垂直居中

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