在列表中居中弹性项目

Posted 2023-03-05

【中文标题】在列表中居中弹性项目

【英文标题】：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。那不行吗？

【参考方案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% */

否则。