html – 在换行时每行保持相同数量的d性子节点

概述我想知道如何在每一行(大约)保持相同数量的元素,包括最后一行,使用flex-wrap(或任何其他想法,包括flexbox). 例如,我有一个包含6个元素的flexbox.当它中断时我想在第一行上有3个元素,在第二行上有3个元素(或者两个元素的总宽度大致相同). (我不想调整孩子的大小,或者打破flexbox的功能.) 现在我只能在第一行获得5个元素,在最后一行获得一个元素. ul { di 我想知道如何在每一行(大约)保持相同数量的元素,包括最后一行,使用flex-wrap(或任何其他想法,包括flexBox).

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

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

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

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

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

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

这可能吗 ？

解决方法 您可以使用媒体查询在特定断点处设置每个d性项的大小.因此,在第一个断点处,您将设置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

总结

以上是内存溢出为你收集整理的html – 在换行时每行保持相同数量的d性子节点全部内容，希望文章能够帮你解决html – 在换行时每行保持相同数量的d性子节点所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。