css - 用于 3-5 个元素的响应式 flexbox 网格

Question

这是一个简单的 CSS，我已设法使其可用于简单的响应式网格(plunker):

.flex {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.flex > * {
  flex-grow: 1;
  /* drives IE11 crazy for some reason */
  /*flex-basis: 0;*/
  padding: 20px;
}

@media screen and (min-width: 600px) {
  .flex {
    flex-direction: row;
  }

  .flex > * {
    flex-basis: calc(50% - 40px);
  }
}

@media screen and (min-width: 992px) {
  .flex {
    flex-direction: row;
  }

  .flex > * {
    flex-basis: calc(25% - 40px);
  }
}

对于指定的断点，它会完成 4 个元素的工作:

1 + 1 + 1 + 1

2 + 2

4

对于 3 个元素:

1 + 1 + 1

2 + 1

3

它给了我 5 个元素:

1 + 1 + 1 + 1 + 1

2 + 2 + 1

4 + 1

它符合flex-basis，但我想得到

3 + 2

最后一个断点。

我怎样才能使这个 CSS 在最后一个断点处作为 3 + 2 的 5 个元素(第一行中的 3 个元素，第二行中的 2 个元素)工作？

Answer 1

将前三个 flex 元素的宽度设置为 33%。

将最后两个 flex 元素的宽度设置为 50%。

在 row wrap 容器中，前三个将占用行中的所有空间，迫使其余元素到下一行。

@media screen and (min-width: 992px) {

  .flex {
    flex-direction: row;
  }

  .flex > *:nth-child(-n + 3) {
    flex-basis: calc(33.33% - 40px);
  }

  .flex > *:nth-last-child(-n + 2) {  /* see note below */
    flex-basis: calc(50% - 40px);
  }
}

第二个 flex-basis 规则可能是可选的(取决于您的布局目标)。您也可以将它设置为 flex: 1 甚至完全不使用它。在所有情况下，两个 div 占据行的 50%。

revised plunker