Question

我在容器中有三个部分。当我将浏览器的大小调整为max-width的{{1}}时，我需要将第1部分和第3部分放在一行，将第2部分放在下一行中。第2节宽度应与第1节和第3节宽度成比例。

但现在，一旦我将浏览器尺寸最小化为668px及以下，则第3部分不可见。

这就是我的尝试。

＆＃13;

668px

＆＃13;

@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;
  }
}

＆＃13;

Answer 1

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

在.section1上height: 300px。

在.section2上min-height: 235px。

但在.section3你什么都没有。尝试对代码进行此调整：

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

具有固定宽度和相同高度的Flex CSS

1 个答案:

jsFiddle demo