Flex box项目，收缩以适应文本换行

Question

我正在使用弹性盒子制作我的导航栏，它运行良好，但是当

项目内的文本换行时，我希望

元素的实际宽度会缩小。例如像这样：

正常宽度：

缩小后：

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

如何使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>

- ConnorL

---

请提供HTML和CSS，以便我们能够重现您遇到的问题。 - Hidden Hobbes

你想要你的网站输出像第一张图片展示的那样，还是像第二张图片展示的那样？ - Leo the lion

我的测试似乎表明这是不可能的。 - Paulie_D

我现在要添加第三张图片。 - ConnorL

如果你从逻辑上考虑的话……这是基于 flexbox 的性质而给出的正确行为。你希望列表项是具有弹性的，但当文本折行时，会有额外的空间分配，所以它就会被分配到可用的位置上。也许 flexbox 在这里并不是你需要的，或者也许可以采用另一种方法。目前我认为这是不可能实现的（通过 flexbox），但我很愿意被证明是错误的。 - Paulie_D

Answer 1

将 .header_items 的 justify-content: space-around; 改为 justify-content: space-between;，并将 .header_items li 的 padding: 2px; 改为 padding: 2px 0.5em; - 更改水平填充可能会让您更接近您所寻求的效果。

- wanttolearn