我想知道如何在每一行(大约)保持相同数量的元素,包括最后一行,使用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 */ }
原文地址:https://www.jb51.cc/html/225780.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。