Центрирование гибких элементов внутри списка

Question

Итак, у меня возникла проблема с центрированием пунктов в меню, которое я создаю.

Я пытался поставить 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>

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

Answer 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% */
}

в противном случае.