在 flexbox 中换行答案

【问题标题】：wrapping text in flexbox在 flexbox 中换行
【发布时间】：2018-06-14 19:53:27
【问题描述】：

是否可以在固定宽度的容器中以 flex 包装文本？

看起来像

img username added
    you as a friend

而不是

    user added
img name you as
         a
         friend

如果 image 和 a 是分开的，我可以这样做，但是由于它们都链接到同一个东西，我想看看它是否可以在同一个标签中完成。

ul {
  width: 150px;
  height: 300px;
  border: solid 1px #000;
}

li {
  display: flex;
  align-items: center;
  justify-content: center;
}

li img {
  width: 25px;
  height: 25px;
}

li a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

li span {
  margin: 0 8px;
}

<ul>
  <li>
    <a href="https://placeholder.com">
      <img src="http://via.placeholder.com/350x150"> <span> Username  </span>
    </a>

    <p> added you as a friend</p>
  </li>
</ul>

【问题讨论】：

不清楚您的预期结果需要是什么 - 您要换行哪个文本？
不是已经包装了吗？还是溢出容器外？

标签： css flexbox

【解决方案1】：

ul {
  width: 150px;
  height: 300px;
  border: solid 1px #000;
  padding: 5px;
}

li {
  display: flex;
  align-items: center;
  justify-content: center;
}

li img {
  width: 25px;
  height: 25px;
}

li a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

li span {
  margin: 0 8px;
}

<ul>
  <li>
    <a href="https://placeholder.com">
      <img src="http://via.placeholder.com/350x150"> <span> Username  </span>
    </a>

    <p> added you as a friend</p>
  </li>
  
</ul>

也许flex-wrap 属性在您的情况下会很有用。检查此链接以获取更多信息 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

【讨论】：