弹性框内的文本是换行的？答案

【问题标题】：Text inside a flex box is wrapping?弹性框内的文本是换行的？
【发布时间】：2019-03-05 09:08:43
【问题描述】：

我有两个用弹性盒子并排放置的父盒子，在它们里面我有另一个弹性盒子，所以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>

【问题讨论】：

请注意，您可以使用Stack Snippets 让人们更容易看到正在运行的代码，让其他人将您的代码复制到答案中，这样其他人就不必访问另一个网站。
使用宽度而不是 flex-basis，这是一个已知问题（查找重复...）
我已经尝试过宽度 - 问题仍然存在。
你通过在弹性项目上设置宽度来限制它，即<h2>和<p>使用flex-basis....这就是原因
我删除了 flex 基础并添加了宽度，不起作用。

标签： html css flexbox

【解决方案1】：

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

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

10.2 Content width: the width property

<percentage>

指定百分比宽度。百分比是根据生成的盒子的宽度计算的堵塞。如果包含块的宽度取决于该元素的宽度，那么最终的布局在 CSS 2.2（和 2.1）中是未定义的。

【讨论】：

【解决方案2】：

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

编辑：

.container>div 中缺少 flex-grow/shrink。添加规则 flex: 1 1 auto;因此它们会均匀扩展以填充所有宽度。

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

【讨论】：

谢谢，但这会将标题扩大到 40% 以上。它应该与内容分开 40 / 60。
编辑还是不对，现在父框都是屏幕宽度的 50%，应该是它们的自然宽度。
对不起，我想我没听懂这个问题。无论如何，您是否试图将标题保持在一行中？
是的，我希望将标题放在一行上，而无需在父级上设置宽度（或任何形式的 flex 增长）。
尝试在标题中添加 `white-space: nowrap;`。我刚刚更新了答案中的示例。