html - 如何使用 flexbox 使这些导航项以最小的空间彼此靠近

Question

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Works</a></li>
  <li><a href="#">Support</a></li>

大家好，我正在尝试使用 flexbox 进行导航，但是 flex 元素之间的空间太大

<ul><li><a href="#">Blog</a></li> </ul>


.nav ul {
    padding: 0;
    display: flex;
    align-content: flex-start;
    flex-wrap: nowrap;
   }
    .nav ul li {
        flex: 1;
    }

Answer 1

您的问题是 flex: 1，它告诉每个单独的 li 填充所有剩余空间。这(在您的情况下)有效地破坏了您在 ul 中定义的 flex-start。

您需要将 CSS 更改为以下内容:

ul {
  padding: 0;
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
ul li {
  padding-left: 10px; /* or some other padding */
  padding-right: 10px;
}

查看此示例:https://codepen.io/anon/pen/vWEPNe