更多行的Flex菜单没有孤独的最后元素？

Question

带弹性的轻松行菜单。在某些视口宽度（~600px）中，菜单在第二行上有一个孤立元素。如何更好地拆分该菜单？

屏幕截图：

＆＃34;更好的＆＃34;例如，第一行表示4个元素，第二行表示3个元素。或者第一行有5个元素，第二行有2个元素。不是这个6：1。

这是我的code

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

html {
  font: Georgia, serif;
  color: #333;
  background: #a0522d;
  line-height: 1.5;
}

ul {
  display: flex;
  flex-wrap: wrap;
  max-width: 75em;
  margin: 0 auto;
  font-family: helvetica;
  padding: 0
}

ul li {
  list-style: none;
  flex-grow: 1;
  /*max-width:16rem*/
}

ul li a {
  line-height: 1.5;
  padding: 0.2em 0.2em;
  display: block;
  text-align: center;
  border-radius: 0.313em;
  background: PaleGoldenrod;
  margin: 0.063em;
  text-decoration: none;
}

＆＃13;

<ul class="content">
  <li><a href="#">Site name</a></li>
  <li><a href="#">Next link</a></li>
  <li><a href="#">Another link</a></li>
  <li><a href="#">Something else</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Almost last link</a></li>
  <li><a href="#">Last link</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用媒体查询并更改元素的flex属性，如下所示：

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

html {
  font: Georgia, serif;
  color: #333;
  background: #a0522d;
  line-height: 1.5;
}

ul {
  display: flex;
  flex-wrap: wrap;
  max-width: 75em;
  margin: 0 auto;
  font-family: helvetica;
  padding: 0
}

ul li {
  list-style: none;
  flex-grow: 1;
}

ul li a {
  line-height: 1.5;
  padding: 0.2em 0.2em;
  display: block;
  text-align: center;
  border-radius: 0.313em;
  background: PaleGoldenrod;
  margin: 0.063em;
  text-decoration: none;
}

@media all and (max-width:620px) {
  ul li {
    flex: 0 0 25%;
  }
  ul li:nth-child(n+5) {
    flex: 0 0 33%;
  }
}
@media all and (max-width:500px) {
  ul li:nth-child(n) {
    flex: 0 0 50%;
  }
  ul li:last-child{
    flex: 0 0 100%;
  }
}
@media all and (max-width:320px) {
  ul li:nth-child(n) {
    flex: 0 0 100%;
  }
}

＆＃13;

<ul class="content">
  <li><a href="#">Site name</a></li>
  <li><a href="#">Next link</a></li>
  <li><a href="#">Another link</a></li>
  <li><a href="#">Something else</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Almost last link</a></li>
  <li><a href="#">Last link</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

如果您可以更改HTML结构，另一种解决方案是将菜单分成两个ul，如下所示：

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

html {
  font: Georgia, serif;
  color: #333;
  background: #a0522d;
  line-height: 1.5;
}

.menu {
  display: flex;
  flex-wrap:wrap;
}

.menu .content {
  flex-grow: 1;
}

ul {
  display: flex;
  flex-wrap: wrap;
  max-width: 75em;
  margin: 0 auto;
  font-family: helvetica;
  padding: 0
}

ul li {
  list-style: none;
  flex-grow: 1;
  min-width:120px;
}

ul li a {
  line-height: 1.5;
  padding: 0.2em 0.2em;
  display: block;
  text-align: center;
  border-radius: 0.313em;
  background: PaleGoldenrod;
  margin: 0.063em;
  text-decoration: none;
}

＆＃13;

<div class="menu">
  <ul class="content">
    <li><a href="#">Site name</a></li>
    <li><a href="#">Next link</a></li>
    <li><a href="#">Another link</a></li>
    <li><a href="#">Something else</a></li>
  </ul>
  <ul class="content">
    <li><a href="#">Contact</a></li>
    <li><a href="#">Almost last link</a></li>
    <li><a href="#">Last link</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

以下是我的解决方案，使用flex-basis结合媒体查询来获得所需的结果，flex-basis值可以根据您的要求进行更改！

* {
  box-sizing: border-box;
}

html {
  font: Georgia, serif;
  color: #333;
  background: #a0522d;
  line-height: 1.5;
}

ul {
  display: flex;
  flex-wrap: wrap;
  max-width: 75em;
  margin: 0 auto;
  font-family: helvetica;
  padding: 0;
}

ul li {
  list-style: none;
  flex-grow: 1;
  /*max-width:16rem*/
  margin-bottom: 2px;
}

ul li a {
  line-height: 1.5;
  padding: 0.2em 0.2em;
  display: block;
  text-align: center;
  border-radius: 0.313em;
  background: PaleGoldenrod;
  margin: 0.063em;
  text-decoration: none;
  height: 100%;
}

@media only screen and (max-width: 630px) {
  ul li {
    flex-basis: 20%;
  }
}

<ul class="content">
  <li><a href="#">Site name</a></li>
  <li><a href="#">Next link</a></li>
  <li><a href="#">Another link</a></li>
  <li><a href="#">Something else</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Almost last link</a></li>
  <li><a href="#">Last link</a></li>
</ul>