CSS - 是否可以仅在可用的 space 低于某个值时换行?

CSS - is it possible to wrap only when space available is below some value?

好的,我遇到了以下问题:我有一个包含文本的 <div>。文字有一些很长的行,例如“要使用此页面,您必须先注册一个帐户...”等

在这个 div 的右侧,我有一张图片。当用户在小屏幕上时,我想包装内容。当他不在时,图像应保持相同大小,div 上的文本应换行(但保持两个元素并排)。

到目前为止,仅当我添加 flex: 0 1 400px 的组合时,我才能使文本换行。但是这种组合在调整屏幕大小时会让事情变得奇怪,因为即使屏幕上有 space,文本也会保持环绕状态(因为 div 不会增长)。

所以,我可能正在寻找的是,如果有一种方法可以说“如果父级大小小于”,则只包装内容。可能吗?

您可以尝试将 flex 属性 设置为媒体查询,仅适用于超过父级尺寸的屏幕,因此它类似于:

@media only screen and (min-width: *size* px){
     parent{
          flex: 0 1 400px;
     }
}

通过使用这个,文本应该不能再在低于 size 变量

的屏幕中换行

好的,我能够让它与 @media 一起工作。最后,我确实添加了 @mediawithmin-width: and set theflex-direction: row`,这样它就会模拟环绕。

我尝试使用 flex-wrap,但是当我包裹时父元素不会调整大小,所以我无法将其他元素居中,这就是我最终的解决方案。