Flex盒子项目,收缩以适合文本包装

Question

我正在使用导航栏的弹性框,它工作正常但是当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;- 更改水平填充可能会让您更接近您正在寻找的内容。