如何强制未知数量的弹性项目在弹性盒中具有相同的宽度[重复]

Question

我希望导航栏中的元素（弹性项目）在没有空间的情况下保持相同的宽度，在这种情况下项目必须换行。此外，项目编号是可变的。也就是说，我会得到这个：

      <style>
         nav {
            display: block;
         }
         .navbar ul {
            display: -webkit-flex;
            display: -ms-flexbox;
            display: -webkit-box;
            display: -moz-box;
            display: flex;
            flex-wrap: wrap;
            font-family: "Avenir Next", Avenir, Corbel, "Franklin Gothic",
               "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
            list-style: none;
            padding: 0;
            background-color: #486a8e;
         }
         .navbar li {
            flex-basis: 25%;
            flex-grow: 1;
            flex-shrink: 0;

            text-transform: uppercase;
            text-align: center;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            background-color: #12459e;
            outline: 1px solid #fff;
         }
         .navbar li a {
            display: block;
            text-decoration: none;
            line-height: 1.75em;
            padding: 1em;
            color: #fff;
         }
      </style>

<nav class="navbar">
         <ul>
            <li><a href="/home">Home</a></li>
            <li><a href="/spaceships">Spaceships</a></li>
            <li><a href="/planets">Planets</a></li>
            <li><a href="/stars">Stars</a></li>
         </ul>
      </nav>

但这是针对预定数量的项目（代码中的 4 个）。我想让这个通用并适用于任意数量的项目。我试过这个设置flex-basis:0：

<style>
         nav {
            display: block;
         }
         .navbar ul {
            display: -webkit-flex;
            display: -ms-flexbox;
            display: -webkit-box;
            display: -moz-box;
            display: flex;
            flex-wrap: wrap;
            font-family: "Avenir Next", Avenir, Corbel, "Franklin Gothic",
               "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
            list-style: none;
            padding: 0;
            background-color: #486a8e;
         }
         .navbar li {
            flex-basis: 0;
            flex-grow: 1;
            flex-shrink: 0;

            text-transform: uppercase;
            text-align: center;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            background-color: #12459e;
            outline: 1px solid #fff;
         }
         .navbar li a {
            display: block;
            text-decoration: none;
            line-height: 1.75em;
            padding: 1em;
            color: #fff;
         }

<nav class="navbar">
         <ul>
            <li><a href="/home">Home</a></li>
            <li><a href="/spaceships">Spaceships</a></li>
            <li><a href="/planets">Planets</a></li>
            <li><a href="/stars">Stars</a></li>
         </ul>
      </nav>

但不起作用，当我缩小视口时，会有一个项目比其他项目长（世界最长的项目），而不是我希望每个项目都具有相同的宽度，并且当这不可能时 wrap

Answer 1

我会推荐 CSS Grid 来处理这样的事情。和它一起工作真是太好了。 （在线工具：https://grid.layoutit.com/）

<style>
         nav {
            display: block;
         }
         .navbar ul {
            display: grid; 
            grid-auto-flow: column; 
            grid-auto-columns: 1fr; 
            font-family: "Avenir Next", Avenir, Corbel, "Franklin Gothic",
               "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
            list-style: none;
            padding: 0;
            background-color: #486a8e;
         }
         .navbar li {
            text-transform: uppercase;
            text-align: center;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            background-color: #12459e;
            outline: 1px solid #fff;
         }
         .navbar li a {
            display: block;
            text-decoration: none;
            line-height: 1.75em;
            padding: 1em;
            color: #fff;
         }

<nav class="navbar">
         <ul>
            <li><a href="/home">Home</a></li>
            <li><a href="/spaceships">Spaceships</a></li>
            <li><a href="/planets">Planets</a></li>
            <li><a href="/stars">Stars</a></li>
         </ul>
      </nav>