具有固定宽度和相等高度的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演示