Flexbox div 文本换行答案

【问题标题】：Flexbox div text wrappingFlexbox div 文本换行
【发布时间】：2018-08-05 08:29:53
【问题描述】：

我想让我的 flexbox 布局中的文本换行。

代码： https://jsfiddle.net/u2oswnth/2/

.child {
  border: solid 1px;
  display: flex;
}
.left {
  width: 100px;
}
.container {
  display: flex;
  flex-wrap: wrap;
}

<div class="container">
  <div class="child left">
    Left!
  </div>
  <div class="child right">
    I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!!
  </div>
</div>

我有什么：当超过框架宽度时，.right div 会掉到下一行。

我想要的：当超过框架宽度时，.rightdiv 中的单词开始换行，两列并排保持，形成单行。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

将flex-wrap: wrap; 更改为flex-wrap: nowrap;。通过使用flex-wrap: wrap;，您告诉.right div 如果空间不足，则换行。由于您只希望文本本身换行，因此您需要使用 flex-wrap: nowrap; 将 .right 保持在同一行。空间不足时文字会自动换行。

在.container 上将flex-wrap: wrap; 更改为flex-wrap: nowrap;

.child {
  border: solid 1px;
  display: flex;
}
.left {
  width: 100px;
}
.container {
  display: flex;
  flex-wrap: nowrap;
}

<div class="container">
  <div class="child left">
    Left!
  </div>
  <div class="child right">
    I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!!
  </div>
</div>

【讨论】：

谢谢！我认为flex-wrap: wrap; 是关于包装文本，而不是 div。傻我=-)
没问题，当我看到你的问题时，我以为你的思路是这样的。 :)
确保使用flex-wrap: nowrap 而不是flex-wrap: no-wrap - 后者无效。
很好看的@DouglasTylerGordon，感谢您告诉我。相应地更正了答案。

【解决方案2】：

注意：不需要在子类上应用"display: flex"，在容器类上应用flex-wrap: nowrap;，因为默认情况下它是nowrap。以下是更新的答案和作品！！。

.child {
  border: solid 1px;
}
.left {
  width: 100px;
}
.container {
  display: flex;
} 

<div class="container">
  <div class="child left">
    Left!
  </div>
  <div class="child right">
    I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!!
  </div>
</div>

【讨论】：

【解决方案3】：

您应该将flex-wrap: wrap; 更改为flex-wrap: nowrap;

请注意flex-wrap: no-wrap;（无破折号）不是有效值。这是关于它的文档参考：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

【讨论】：