flex box中的文本是否正在换行?

问题是百分比长度使用父容器作为引用,而这在代码中是缺失的。父母 h2 p

一旦在父对象上定义了宽度(我知道您不想这样做),问题就解决了。否则,使用另一个长度单位, white-space: nowrap ,或其他一些妥协。

10.2 Content width: the width property

<percentage>

指定宽度百分比。百分比是根据生成的框的包含宽度计算的 块如果包含块的宽度取决于此元素的 宽度,则结果布局在CSS 2.2(和2.1)中未定义。

将flex grow:1和flex shrink:0添加到h2中。这将防止h2收缩。此外,由于您限制了相对最大值,h2可以增长(40%),因此无论如何都会断裂。

编辑:

.container>div . 添加规则flex:1自动;因此,它们均匀地扩展以填充所有宽度。

.container {
  background: grey;
  display: flex;
}

.container>div {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
}

h2 {
  flex: 1 0 40%;
  white-space: nowrap:
  /*flex-basis: 40%;*/
}

p {
  flex-basis: 60%;
}

<div class="container">
  <div>
    <h2>This Is Title A</h2>
    <p>Content.</p>
  </div>
  <div>
    <h2>This Is Title B</h2>
    <p>Content.</p>
  </div>
</div>