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会落到下一行。

我想要的是什么：当超出框架宽度时，.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;保持在同一行。当空间不足时，文本将自动换行。

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

568|896|2015-12-14 13:43:05||1|6666698|text1|999969|624|0|1|0|1^696|982|2015-11-14 13:43:05||2|6666695|text2|899969|634|0|0|0|0^147|111|2015-10-14 13:43:05||3|6666694|text3|799969|644|0|0|0|0^025|558|2014-09-14 13:43:05||4|6666693|text4|699969|654|0|1|0|1^925|777|2014-08-14 13:43:05||5|6666692|text5|599969|664|0|1|0|1^

Answer 2

注意：无需在子类上应用"display: flex"，在容器类上应用flex-wrap: nowrap;，因为默认为nowrap。下面是更新的答案和WORKS !!。

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

Answer 3

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

请注意flex-wrap: no-wrap;（没有换行）不是有效值。以下是有关它的文档参考：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

Flexbox div文本包装

3 个答案: