用于 3-5 个项目的响应式 flexbox 网格答案

【问题标题】：Responsive flexbox grid for 3-5 items用于 3-5 个项目的响应式 flexbox 网格
【发布时间】：2017-02-05 19:01:07
【问题描述】：

这是我设法使其适用于简单响应式网格的简单 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 个项目）？

【问题讨论】：

标签： css responsive-design flexbox

【解决方案1】：

将前三个弹性项目的宽度设为 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

【讨论】：