在列表中居中弹性项目答案

【问题标题】：Centering flex items inside a list在列表中居中弹性项目
【发布时间】：2020-06-28 15:52:52
【问题描述】：

所以我在将正在制作的菜单中的项目居中时遇到问题。

我尝试输入justify-content: center，但这似乎不起作用。有人可以帮忙吗？

现在菜单卡在左上角。我想把它居中。

.header2 {
  background-color: rgb(190, 13, 13);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 15px;
}

.menu {
  display: flex;
}

.menu li {
  margin-right: 15px;
}

.menu li a {
  display: block;
  padding: 10px;
}

<nav class="header2">
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contacts</a></li>
  </ul>
</nav>

【问题讨论】：

将justify-content: center; 添加到您的.header2。那不行吗？

标签： css flexbox centering

【解决方案1】：

默认情况下，嵌套的 flexbox (.menu) 设置为 flex-grow: 0，这意味着它不会占据父级的全部长度。

因此，应用justify-content: center 无效，因为容器中没有可用空间。

添加flex-grow: 1 可提供您需要的额外空间：

将此添加到您的代码中：

.menu {
    display: flex;
    flex: 1;
    justify-content: center;
}

此外，由于您已经在使用具有语义意义的 nav 元素，因此实际上不需要嵌套列表元素。试试这个简化的代码：

.menu {
  display: flex;
  justify-content: center;
  background-color: rgb(190, 13, 13);
}

.menu a {
  padding: 25px 10px;
}

.menu a:hover {
  background-color: orangered;
}

<nav class="menu">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contacts</a>
</nav>

【讨论】：

【解决方案2】：

试试：

.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-grow: 1; /* or width: 100% */
}

如果您希望元素按所有宽度均匀分布。

还有：

.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-grow: 1; /* or width: 100% */
}

否则。

【讨论】：