我想知道如何在每一行(大约)保持相同数量的元素,包括最后一行,使用flex-wrap(或任何其他想法,包括flexBox).
例如,我有一个包含6个元素的flexBox.当它中断时我想在第一行上有3个元素,在第二行上有3个元素(或者两个元素的总宽度大致相同).
现在我只能在第一行获得5个元素,在最后一行获得一个元素.
ul {
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}
这是一个jsfiddle：https://jsfiddle.net/yfj2g7wx/
我认为大部分时间它会以图形方式提供比逐个包装元素更好的结果.
这可能吗 ？
解决方法
您可以使用媒体查询在特定断点处设置每个弹性项的大小.因此,在第一个断点处,您将设置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 */
}
