Flex：当文本太长时换行

【问题标题】：Flex: When text too long break into new lineFlex：当文本太长时换行
【发布时间】：2016-06-21 22:05:00
【问题描述】：

我在想是否可以使用 css flexbox 来实现跟随。

在布局中，原本有 2 个 div 彼此相邻。左侧包含一组图标并具有固定宽度。右边包含文本，可能很长。

有没有办法，如何使只使用css（尤其是flexbox），当文本太长时，div会换行（在第一个div下）？ p>

检查下图。

【问题讨论】：

你真的需要一个弹性盒子吗？

标签： css flexbox

【解决方案1】：

您可以通过使用display: flex; 和flex-wrap: wrap; 创建一个容器来做到这一点。然后给溢出文本一个flex-grow: 1;

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.fixed-width {
  width: 200px;
  border: 1px solid red;
}

.fixed-width,
.overflow-text {
  display: flex;
  justify-content: space-around;
}

.overflow-text {
  flex-grow: 1;
  border: 1px solid red;
}

<div class="container">
  <div class="fixed-width">
    <p>Hi</p>
    <p>Hi</p>
    <p>Hi</p>
    <p>Hi</p>
  </div>
  <div class="overflow-text"><p>This is some text that is really long.</p></div>
</div>

JSFiddle

【讨论】：