html – 在换行时每行保持相同数量的弹性子节点
发布时间:2020-12-14 18:37:20 所属栏目:资源 来源:网络整理
导读:我想知道如何在每一行(大约)保持相同数量的元素,包括最后一行,使用flex-wrap(或任何其他想法,包括flexbox). 例如,我有一个包含6个元素的flexbox.当它中断时我想在第一行上有3个元素,在第二行上有3个元素(或者两个元素的总宽度大致相同). (我不想调整孩子的大
我想知道如何在每一行(大约)保持相同数量的元素,包括最后一行,使用flex-wrap(或任何其他想法,包括flexbox).
例如,我有一个包含6个元素的flexbox.当它中断时我想在第一行上有3个元素,在第二行上有3个元素(或者两个元素的总宽度大致相同). (我不想调整孩子的大小,或者打破flexbox的功能.) 现在我只能在第一行获得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 */ } jsFiddle (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |