html - flexbox 元素，收缩以适合文本换行

Question

我在我的导航栏上使用了一个 flexbox ，它工作正常，但是当 li 项中的文本放到一个新行上时，如果li 元素会收缩。例如像这样:

正常宽度:

收缩:

“舞蹈与表演”文本左右两侧浪费的空间意味着这些元素重叠并且看起来很糟糕。

如何让 li 具有自动宽度？

header {
  height: auto;
  margin: auto;
  background-color: #58595B;
  z-index: 100;
  max-width: 1200px;
  width: 95%;
}
ul.header_items {
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-around;
}
.header_items li {
  background-color: #7E489C;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  box-shadow: 0px 0px 18px 1px rgba(0, 0, 0, 0.2);
  transition: 0.4s;
  padding: 2px;
  width: auto;
}
.header_items li a {
  font-family: 'Norwester-Regular', sans-serif;
  color: #ffffff;
  font-size: 15pt;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
}

<header id="static_nav">
<ul class="header_items" style="padding-left:0px;">
    <li id="header_item_first"><a href="home" id="index_button">Home</a></li>
    <li id="header_dp"><a href="dance-performance" id="dance_button">Dance &amp; Performance</a></li>
    <li id="header_af"><a href="adult-fitness.php">Adult &amp; Fitness</a></li>
    <li id="header_w"><a href="https://www.millyacademy.com/workshops.php">Workshops</a></li>
    <li id="header_cc"><a href="https://www.millyacademy.com/corporate-celebrations.php">Corporate &amp; Celebrations</a></li>
    <li id="header_g"><a href="https://www.millyacademy.com/showcase.php">Gallery</a></li>
    <li id="header_s"><a href="https://www.millyacademy.com/shop.php">Shop</a></li>
    <li id="header_c"><a href="https://www.millyacademy.com/contact.php">Contact Us</a></li>
    <li id="button_student_login"><a href="student-login" id="login_button">Student Login</a></li>
</ul>
</header>

Answer 1

将 .header_items 从 justify-content: space-around; 更改为 justify-content: space-between; 和 。 header_items li 从 padding: 2px; 到 padding: 2px 0.5em; - 改变水平填充可能会让你更接近你正在寻找的东西。