CSS - 只有当可用空间低于某个值时才可以换行？

Posted 2023-03-05

【中文标题】CSS - 只有当可用空间低于某个值时才可以换行？

【英文标题】：CSS - is it possible to wrap only when space available is below some value?

【发布时间】：2021-11-10 16:22:41

【问题描述】：

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

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

到目前为止，我只有在添加 flex: 0 1 400px 的组合时才能使文本换行，例如。但是这种组合在调整屏幕大小时会变得很奇怪，因为即使屏幕上有空间（因为 div 不会增长），文本也会保持换行。

所以，我可能正在寻找的是，如果有办法说“仅在父大小小于时包装内容”。有可能吗？

【问题讨论】：

您尝试过媒体查询吗？ (developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…)。他们将帮助您构建响应式 UI。 @media (max-width: 1200px) .some-class... 仅适用于例如页面的视口宽度大于 1200 像素。

【参考方案1】：

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

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

通过使用它，文本应该不能再在低于 size 变量的屏幕中换行

【参考方案2】：

好的，我可以让它与@media 一起工作。最后，我确实添加了一个@mediawithmin-width: and set theflex-direction: row`，这样它就可以模拟换行了。

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