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
一起工作。最后,我确实添加了 @mediawith
min-width: and set the
flex-direction: row`,这样它就会模拟环绕。
我尝试使用 flex-wrap,但是当我包裹时父元素不会调整大小,所以我无法将其他元素居中,这就是我最终的解决方案。
好的,我遇到了以下问题:我有一个包含文本的 <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
一起工作。最后,我确实添加了 @mediawith
min-width: and set the
flex-direction: row`,这样它就会模拟环绕。
我尝试使用 flex-wrap,但是当我包裹时父元素不会调整大小,所以我无法将其他元素居中,这就是我最终的解决方案。