代码之家 › 专栏 › 技术社区 › meds

在新的生产线上使用全宽度的Flexbox?

flexbox css html javascript

meds · 技术社区 · 5 年前

我有两个div使用以下CSS排列在一起:

.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的情况下有什么方法可以做到这一点吗?

4 回复 | 直到 5 年前

Silviu-Marian 5 年前

这里有两种情况

屏幕太小

如果屏幕低于400px,我们可以接受目前的规则
如果屏幕高于400px,但仍然太小,我们最终会遇到冲突的最大宽度

在不使用javascript的情况下,是否可以这样做?

它可以通过媒体查询来实现

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

knighteq 5 年前

也许你应该使用媒体查询?

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

David Marabottini 5 年前

你应该使用nowrap属性, flex wrap: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

Siddharth Audhinarayanan 5 年前

使用媒体查询在这里是一个挑战,因为问题发生的断点取决于柔性宽度的大小。

因此,更好的方法是在.mainContent上设置最小宽度,并对断点使用媒体查询,该断点是.mainContent的最小宽度和.interactions的最大宽度+边距的总和

.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/