你看下是不是这样的，查看demo
<div class="box"> <div>整形1</div> <div>整形2</div> <div>整形3</div> <div>其他整形1</div> <div>整的都形1</div> <div>整形嗯嗯1</div> <div>整形</div> </div>
.box { width: 300px; border: 1px solid #000; display: flex; flex-wrap: wrap; } .box div { flex-grow: 1; flex-shrink: 0; background: #ccc; margin: 1px; }
看上去是移动端H5，而且菜单的宽度并不是自动撑开的，所以你可以直接设置每个菜单的宽度(750的设计稿，第一行就是 750/4，第二行就是750/3)。再通过rem自动转换就行了。
以下代码只能在浏览器移动模式375下才能正常显示，实际项目中再自动转成rem即可
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .menu { display: flex; flex-wrap: wrap; } .menu__item { height: 80px; border: 1px solid orange; box-sizing: border-box; } </style> </head> <body> <div class="menu"> <div class="menu__item"></div> </div> <script> const menus = [ { name: "1", width: 300 / 4 + "px" }, { name: "1", width: 300 / 4 + "px" }, { name: "1", width: 300 / 4 + "px" }, { name: "1", width: 300 / 4 + "px" }, { name: "1", width: 300 / 3 + "px" }, { name: "1", width: 300 / 3 + "px" }, { name: "1", width: 300 / 3 + "px" } ]; const menusHtml = menus .map( item => `<div class="menu__item" style="width: ${item.width}"></div>` ) .join(""); document.querySelector(".menu").innerHTML = menusHtml; </script> </body> </html>
flex-wrap: wrap
flex-basis: 10em
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
暂无简介
文章 0 评论 0
接受
发布评论
评论（3）
你看下是不是这样的，查看demo
看上去是移动端H5，而且菜单的宽度并不是自动撑开的，所以你可以直接设置每个菜单的宽度(750的设计稿，第一行就是 750/4，第二行就是750/3)。再通过rem自动转换就行了。
以下代码只能在浏览器移动模式375下才能正常显示，实际项目中再自动转成rem即可
flex-wrap: wrapflex-basis: 10em（10个全宽字符）