代码之家 › 专栏 › 技术社区 › panthro

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

flexbox css3 css html

0

panthro · 技术社区 · 7 年前

JS Fiddle

h2 和 p

我没有设置父框的宽度,理想情况下我不想设置。

Is -为什么不能呢 氢 This Is Title A 全部显示在一行上?

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

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

h2 {
  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>

1 回复 | 直到 7 年前

1

Michael Benjamin William Falcon 7 年前

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

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

10.2 Content width: the width property

<percentage>

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

2

-1

brubs 7 年前

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