html - 换行时每行保持相同数量的 flex child

Question

我想知道如何使用flex-wrap(或任何其他想法，包括flexbox)在每一行(包括最后一行)上保留(大约)相同数量的元素>).

例如，我有一个包含 6 个元素的 flexbox。当它中断时，我希望第一行有 3 个元素，第二行有 3 个元素(或者两个元素的总宽度大致相同)。

(我不想调整 child 的大小，或者破坏 flexbox 的功能。)

现在我只能在第一行获取 5 个元素，在最后一行获取一个元素。

ul {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}

这是一个 jsfiddle:https://jsfiddle.net/yfj2g7wx/

我认为大多数时候它会以图形方式给出比一个一个地包装元素更好的结果。

这可能吗？

Answer 1

您可以使用媒体查询在某些断点处设置每个 flex 元素的大小。因此，在第一个断点处，您将设置 flex-basis: 33%。这将强制三个元素排成一行。

@media screen and ( max-width: 900px ) {
  li { flex-basis: 33%; }                    /* forces three items to a line */
}

@media screen and ( max-width: 600px ) {
  li { flex-basis: 50%; }                    /* forces two items to a line */
}

@media screen and ( max-width: 300px ) {
  li { flex-basis: 100%; }                   /* forces one item per line line */
}

jsFiddle