html - Flexbox div 文本环绕

Question

我想在我的 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 落到下一行。

What I want: 当超过框架宽度时，.right div 中的单词开始换行，两列保持并排，形成单排。

Answer 1

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

• 将 flex-wrap: wrap; 更改为 flex-wrap: nowrap; on .container

.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>