具有固定寬度和相等高度的Flex CSS

Question

我在一個容器中有三個部分。 當我將瀏覽器的大小調整為max-width 668px ，我需要將第1部分和第3部分放在一行中，而在第二行中則放在第2部分中。 第2節的寬度應與第1節和第3節的寬度成比例。

但是現在，一旦我將瀏覽器的大小最小化到668px及以下，則第3部分將不可見。

這就是我嘗試過的。

 @media (max-width: 668px) { .container { display: flex; flex-wrap: wrap; justify-content: center; align-self: flex-start; } .container .section1 { height: 300px; } .container .section1, .container .section3 { flex: 0 0 262px; margin: 3px; display: block; flex-grow: 0; flex-shrink: 0; } .container .section2 { flex: 0 0 500px; flex-grow: 0; flex-shrink: 0; order: 1; min-height: 235px; } } @media (max-width: 940px) { .container { display: flex; flex-wrap: wrap; justify-content: center; align-self: flex-start; } .container .section1 { height: 300px; } .container .section1, .container .section3 { flex: 0 0 262px; margin: 3px; display: block; flex-grow: 0; flex-shrink: 0; } .container .section2 { flex: 0 0 500px; flex-grow: 0; flex-shrink: 0; order: 1; min-height: 235px; } } 

 <div class="container"> <div class="section1">Section 1</div> <div class="section2">Section 2</div> <div class="section3">Section 3</div> </div> 

Answer 1

您在.section3上沒有指定任何高度。

在.section1您的height: 300px 。

在.section2您的min-height: 235px 。

但是在.section3您什么都沒有。 嘗試對您的代碼進行此調整：

.section1, .section3 {
    height: 300px;
}

jsFiddle演示