使用flexbox填充可用宽度，直到可以容纳两个项目

我有两个“单元格”，它们彼此重叠放置在一个视口太狭窄以至于不能并排坐在一起。使用flexbox填充可用宽度，直到可以容纳两个项目

直到视口宽度足以让单元格并排呈现时，我希望单元格在视口变宽时保持100％宽度。

当视口足够宽以容纳两个单元格时，我希望它们并排呈现。

当视口拉伸得更宽时，我希望左手格保持其最大宽度。我希望右边的单元格扩大以填充其余的宽度。

这可以用flexbox来完成吗？

以下几乎作品，除了存在以下问题：

一旦容器是800像素以上的右手细胞停止在宽度
生长所述细胞不均匀占据100％的宽度时它们被堆叠在彼此（AFAICT）的顶部

* { 
 
    box-shadow: 0 0 0 1px black inset; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 

 
.cell1 { 
 
    min-width: 400px; 
 
} 
 

 
.cell2 { 
 
    min-width: 400px 
 
    width: /* 100% until the viewport is 800px or more, at which point it should start stretching to fill */ 
 
}

<div class="container"> 
 
    <div class="cell1">contents of cell 1</div> 
 
    <div class="cell2">contents of cell 2</div> 
 
</div>

来源

2017-08-07 Ben

单靠Flexbox无法做到这一点，需要媒体查询。

栈片断

* { 
 
    box-shadow: 0 0 0 1px black inset; 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.cell1 { 
 
    flex-basis: 100%; 
 
} 
 
.cell2 { 
 
    flex-grow: 1; 
 
} 
 

 
@media (min-width: 800px) { 
 
    .cell1 { 
 
    max-width: 400px; 
 
    } 
 
}

<div class="container"> 
 
    <div class="cell1">contents of cell 1</div> 
 
    <div class="cell2">contents of cell 2</div> 
 
</div>

来源

2017-08-07 11:19:55 LGSon

使用flexbox填充可用宽度，直到可以容纳两个项目

回答

相关问题