如何修复flexbox中箭头与多行文本之间的空白问题？

我明白你的问题啦——当前的flex布局把文本和箭头拆成了两个独立的flex项，文本项会占满容器的全部宽度，导致多行文本的最后一行右侧到容器边缘留出空白，箭头被钉在容器最右端，自然就和文本拉开了距离。

咱们可以把布局调整一下，让箭头成为文本内容的一部分，而不是独立的flex项，这样就能让箭头紧紧跟着文本末尾，同时保持文本自动换行填满容器宽度。

修改后的CSS代码： #

.list {
  width: 160px;
  padding-right: 10px;
  border: 1px solid #000;
}
.item {
  margin-bottom: 15px;
  line-height: 1.5;
}
.item::after {
  content: "→";
  /* 可选：给箭头和文本之间加一点点间距，看起来更舒服 */
  margin-left: 0.2em;
}

如果需要保持箭头和文本垂直居中： #

要是你希望单行文本时箭头和文字垂直对齐，可以把伪元素改成inline-block并设置垂直对齐：

.item::after {
  content: "→";
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.2em;
}

这样调整后，不管文本是一行还是多行，箭头都会紧紧贴在最后一行文本的末尾，再也不会出现讨厌的空白啦。

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