我想知道如何在每一行（包括最后一行）上保留（大约）相同数量的元素flex-wrap（或任何其他想法，包括flexbox).
例如，我有一个包含 6 个元素的 Flexbox。当它中断时，我希望第一行有 3 个元素，第二行有 3 个元素（或者两个元素的总宽度大致相同）。
（我不想调整子项的大小，或破坏弹性盒功能。）
现在我无法在第一行获取 5 个元素，在最后一行获取一个元素。
ul {
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}
这是一个jsfiddle：https://jsfiddle.net/yfj2g7wx/ 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 */
}
jsFiddle https://jsfiddle.net/fbpvp4rm/2/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
