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

将前三个弹性项目的宽度设为33％。

将最后两个弹性项目的宽度设为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

响应flexbox网格3-5项

1 个答案: