Question

我使用以下CSS将两个div并排排列：

.overlay {
  display: flex;
  flex-wrap: wrap;   
}

.mainContent {
  flex-grow: 1;
  flex-basis: auto;
  margin: 5px;
}

.interactions {
  flex-basis: auto;
  flex-grow: 1;
  max-width: 400px;
  margin: 5px; 
}

当屏幕的宽度变得太小（即交互不再适合）时，会创建一个新行，用于放置交互。

发生这种情况时，我想做的是将交互切换为最大宽度：100％，是否有任何方法可以在不使用JavaScript的情况下进行？

Answer 1

这里有两种情况

屏幕太小

如果屏幕低于400像素，那么我们对目前的规则还可以
如果屏幕大于400像素但仍然太小，我们将遇到最大宽度冲突

是否有任何不使用javascript的方法？

可以通过媒体查询来实现

@media only screen and (max-width: 600px) {
  .instructions { min-width: 100% }
}

Answer 2

也许您应该使用媒体查询？

@media (max-width: 400px) { 
  .interactions {
    max-width: 100%;
  }
}

Answer 3

您应该使用nowrap属性， flex-wrap：当内部div太少时包装新行，nowrap不创建，保留在同一行中的代码是

.overlay {
    display: flex;
    flex-wrap: nowrap;

  }
  .mainContent {
    flex-grow: 1;
    flex-basis: auto;
    margin: 5px;
  }

  .interactions {
    flex-basis: auto;
    flex-grow: 1;
    max-width: 400px;
    margin: 5px; 
  }

您可以在https://www.w3schools.com/cssref/css3_pr_flex-wrap.asp

中找到文档

您还可以在https://caniuse.com/#search=flex-wrap

处找到用法和浏览器兼容性的其他详细信息。

Answer 4

在这里使用媒体查询是一个挑战，因为发生问题的断点取决于灵活宽度.mainContent

的大小。

因此，更好的方法是在.mainContent上设置一个最小宽度，并对断点使用媒体查询，该查询是.mainContent的最小宽度与.interactions + margins的最大宽度之和

.overlay {
    display: flex;
    flex-wrap: wrap;
    justify-content:stretch;
}
.mainContent {
    flex-grow: 1;
    flex-basis: auto;
    min-width:400px;
    margin: 5px;
}
.interactions {
    flex-basis: auto;
    flex-grow: 1;
    max-width:400px;
    margin: 5px; 
}
@media only screen and (max-width: 840px){
    .mainContent, .interactions{
        max-width:none;
        min-width:none;
    }
}

在此处查看实际操作：https://jsfiddle.net/gnu12Lfs/

Flexbox强制换行时会变全角吗？

4 个答案: