使用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填充可用寬度，直到可以容納兩個項目

回答

相關問題