html - 更多行上的 Flex 菜单没有孤独的最后一个元素？

Question

带有 flex 的简单行菜单。在某些视口(viewport)宽度(~600px)中，菜单在第二行上被一个单独的元素分割。如何更好地拆分该菜单？

截图:

“更好”意味着例如第一行有 4 个元素，第二行有 3 个元素。或者第一行有 5 个元素，第二行有 2 个元素。只是不是这个 6:1。

这是我的 code

* {
  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;
}

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

Answer 1

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

* {
  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%;
  }
}

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

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

* {
  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;
}

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