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

我有两个相邻的带有弹性盒的父盒，在它们内部我有另一个弹性盒，这样

h2

和

p

可以并排放置

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

当每个flex box都有扩展空间时，为什么要包装文本内容？在本例中，标题在

is

之后换行-为什么

h2

不能展开，以便

这是标题A

全部显示在一行上

.container{
背景：灰色；
显示器：flex；
}
.container>div{
对齐项目：居中；
显示器：flex；
}
氢{
弹性基准：40%；
}
p{
弹性基准：60%；
}

这是标题A
内容

这是标题B
内容

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

编辑：

.container>div

中缺少flex grow/shrink。添加规则flex:1自动；因此，它们均匀地扩展以填充所有宽度

.container{
背景：灰色；
显示器：flex；
}
.container>div{
对齐项目：居中；
显示器：flex；
flex:1自动；
}
氢{
弹性：1040%；
空白：nowrap:
/*弹性基准：40%*/
}
p{
弹性基准：60%；
}

这是标题A
内容

这是标题B
内容

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

编辑：

.container>div

中缺少flex grow/shrink。添加规则flex:1自动；因此，它们均匀地扩展以填充所有宽度

.container{
背景：灰色；
显示器：flex；
}
.container>div{
对齐项目：居中；
显示器：flex；
flex:1自动；
}
氢{
弹性：1040%；
空白：nowrap:
/*弹性基准：40%*/
}
p{
弹性基准：60%；
}

这是标题A
内容

这是标题B
内容

问题在于百分比长度使用父容器作为参考，而这在代码中是缺失的。

h2

和

p

项的父项没有定义的宽度

一旦在父对象上定义了宽度（我知道您不想这样做），问题就解决了。否则，请使用另一个长度单位，

空白：nowrap

，或其他折衷方法

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

---

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

h2

和

p

项的父项没有定义的宽度

一旦在父对象上定义了宽度（我知道您不想这样做），问题就解决了。否则，请使用另一个长度单位，

空白：nowrap

，或其他折衷方法

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

---

---

请注意，您可以使用使人们更容易看到正在运行的代码，让其他人将您的代码复制到答案中，这样其他人就不必访问其他站点。使用width而不是flex basis，这是一个已知的问题（查找重复项…）我尝试了宽度-问题仍然存在。您通过在弹性项上设置宽度来限制宽度，即

和

使用

弹性基础

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

和

使用

弹性基础

…这就是为什么我删除弹性基础并添加宽度的原因。谢谢，但这将标题扩展到了40%以上。它应该是40/60与内容分割。编辑仍然不正确，现在父框都是屏幕宽度的50%，它们应该是它们的自然宽度。对不起，我想我没有正确理解这个问题。你是不是想无论如何都把标题保持在一行？是的，我希望标题保持在一行，而不在父项上设置宽度（或任何形式的弹性增长）。尝试添加“空白：nowrap；”与标题一致。我刚刚更新了答案中的示例。谢谢，但这将标题扩展到40%以上。它应该是40/60与内容分割。编辑仍然不正确，现在父框都是屏幕宽度的50%，它们应该是它们的自然宽度。对不起，我想我没有正确理解这个问题。你是不是想无论如何都把标题保持在一行？是的，我希望标题保持在一行，而不在父项上设置宽度（或任何形式的弹性增长）。尝试添加“空白：nowrap；”与标题一致。我刚刚更新了答案中的示例。