问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

flex 布局如何实现不定宽度导航(自动换行...)

头像
上善若水
    271512

    image.png

    html5css3flex
    阅读 5.8k
    3 个回答
    得票最新
    头像
    zengkan
      1.2k2622
      ✓ 已被采纳

      你看下是不是这样的，查看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;
}

      image.png

      头像
      蛋先生DX
        30715

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

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

        image.png

        <!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>
        头像
        Meathill
          22.6k133642
          1. 父容器支持换行：flex-wrap: wrap
          2. 子元素设置最小宽度：flex-basis: 10em（10个全宽字符）
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题