使用带有 flex-wrap: wrap 的 Flexbox 时如何使文本换行？答案

【问题标题】：How to make text wrap when using Flexbox with flex-wrap: wrap?使用带有 flex-wrap: wrap 的 Flexbox 时如何使文本换行？
【发布时间】：2021-05-29 16:25:15
【问题描述】：

问题：在我当前的布局中，我的框具有基于标准的特定高度。我想使用列在该框/div 中显示数据，但是当我这样做时，到达第二列的项目会溢出父容器的宽度。（见下图）

注意：调整屏幕大小以获得我在下面的屏幕截图中显示的结果

我正在寻找的结果：我希望元素占用父容器中所需的尽可能多的空间，可能只会在 Y 轴（垂直）上溢出。换句话说，我希望将文本换成多行。（见下图）

代码：https://jsfiddle.net/sr9fj07m/

<div
      style="
        display: flex;
        flex-direction: column;
        height: 50px;
        background-color: blue;
        flex-wrap: wrap;
        align-content: flex-start;
      "
    >
      <div style="display: flex; flex-direction: row; align-items: center">
        <div style="background-color: red">Other text here</div>
      </div>
      <div style="display: flex; flex-direction: row; align-items: center">
        <div style="background-color: red">Another text here</div>
      </div>
      <div
        style="
          display: flex;
          flex-direction: row;
          align-items: center;
          flex-shrink: 1;

        "
      >
        <div style="background-color: aqua;">
          random text goes here random text goes here random text goes here
          random text goes here
        </div>
      </div>
    </div>

如何实现？谢谢！

编辑：我正在寻找的是一种解决方案，其中我没有硬编码的宽度，并且子项自动从上到下重新排列，包装成多列（flex-direction：column; flex-wrap：wrap），但不会溢出父宽度，并且所以将文本分成多行。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

我的理解是弹性项目会增长以满足子项的内容，因此在这种情况下，包装长文本的 div 会增长以满足文本长度。一种解决方案是在 div 上设置特定的宽度。下面将达到您想要的结果，但您需要在第三个 div 上调整 div 宽度才能获得正确的结果。

<html>
  <body>
    <div
      style="
        display: flex;
        flex-direction: column;
        height: 50px;
        background-color: blue;
        flex-wrap: wrap;
        align-content: flex-start;
        width: 600px;
      "
    >
      <div style="display: flex; flex-direction: row; align-items: center">
        <div style="background-color: red">Other text here</div>
      </div>
      <div style="display: flex; flex-direction: row; align-items: center">
        <div style="background-color: red">Another text here</div>
      </div>
      <div
        style="
          display: flex;
          flex-direction: row;
          align-items: center;
          flex-shrink: 1;
          width: 400px;
        "
      >
        <div style="background-color: aqua;">
          random text goes here random text goes here random text goes here
          random text goes here
        </div>
      </div>
    </div>
  </body>
</html>

【讨论】：

“所以在这种情况下，包裹长文本的 div 正在增长以满足文本长度”我不认为这是真的：第三个 div 恰好 600px宽度，如果你放的文本少一点（或更多），它仍然会有 600px 的宽度。这个宽度来自于父 div 宽度（即使它从父 div 溢出）。
是的，我相信这是因为它具有硬编码的宽度。由于父 flex 元素有一个硬编码的宽度，它被告知不要增长以满足内部内容的宽度。然后通过在内部 div 上定义一个宽度，您可以告诉它不要增长以满足其内容的宽度，从而使内容包含在 div 中。
尝试移除对父级的 600px 宽度约束：父级占用了它所能占用的所有水平空间，但第三个子级仍然从父级溢出并出现水平滚动条。您的解决方案有效，但如果您希望它们与父级上的可用空间完全匹配，则必须对包裹的子级的尺寸进行精确硬编码。我更愿意找到一个解决方案，让孩子们调整他们的宽度以匹配父母的宽度。但我不确定我们能否做到。
是的，这是我能针对这种特定情况提出的最佳解决方案。我不确定您要进行哪种设计，但最好定义两个单独的列并指定哪些 div 进入哪些列。然后您可以设置每列的指定宽度（例如 50%），然后您可以管理每列中的内容。（不知道这是否有意义哈哈）
嗨@NickLans 感谢您的建议，但我正在寻找的是一个解决方案，其中我没有硬编码宽度并且子项自动从上到下重新排列，包装成多列（flex-direction : column; flex-wrap: wrap)，但不会溢出父宽度，因此将文本分成多行。（就像我在屏幕截图中显示的“我正在寻找”）我正在寻找可以在不同屏幕宽度上开箱即用的解决方案。顺便说一句：我为父容器添加了静态宽度，只是为了模拟屏幕较小的设备。