包裹时每行保持相同数量的弹性儿童

Question

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

例如,我有一个包含6个元素的flexbox.当它打破时我想在第一行有3个元素,在第二行有3个(或两个元素的总宽度大致相同).

(我不想调整孩子的大小,或者打破flexbox的功能.)

现在我只能在第一行获得5个元素,在最后一行获得一个元素.

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

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

我认为大部分时间它会以图形方式提供比逐个包装元素更好的结果.

这可能吗 ？

Answer 1

您可以使用媒体查询在特定断点处设置每个弹性项的大小.所以在你设定的第一个断点处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