Question

我有两个与Flex框相邻放置的父框，在它们的内部，我还有另一个Flex框，因此h2和p可以并排放置。

我没有设置父框的宽度，理想情况下我不想这样做。

为什么每个弹性框都有扩展空间，为什么我的文本内容会自动换行？在示例中，标题在Is之后换行了-为什么h2不能展开，而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>

Answer 1

问题在于百分比长度使用父容器作为参考，而您的代码中缺少该百分比。 h2和p的父项没有定义的宽度。

一旦您在父级上定义了宽度（我知道您不想这样做），问题就解决了。否则，请使用另一个长度单位white-space: nowrap或其他折衷办法。

10.2 Content width: the width property

<percentage>

指定百分比宽度。相对于生成的盒子的宽度计算百分比   块。如果包含块的宽度取决于此元素的   宽度，则结果布局在CSS 2.2（和2.1）中未定义。

Answer 2

在h2中添加flex-grow：1和flex-shrink：0。这样可以防止h2缩小。另外，由于您限制了h2可以增长的相对最大值（40％），因此无论如何都会破坏。

编辑：

{p {1}}中缺少

flex-grow / shrink。添加规则flex：1 1 auto;因此它们会均匀膨胀以填满所有宽度。

.container>div

.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%;
}

弹性框内的文字是否换行？

2 个答案: