html英文导航太长自动分行,flex 布局如何实现不定宽度导航(自动换行...)

看上去是移动端H5，而且菜单的宽度并不是自动撑开的，所以你可以直接设置每个菜单的宽度(750的设计稿，第一行就是 750/4，第二行就是750/3)。再通过rem自动转换就行了。

以下代码只能在浏览器移动模式375下才能正常显示，实际项目中再自动转成rem即可

Document

.menu {

display: flex;

flex-wrap: wrap;

}

.menu__item {

height: 80px;

border: 1px solid orange;

box-sizing: border-box;

}

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 => `

)

.join("");

document.querySelector(".menu").innerHTML = menusHtml;