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

Question

我正在为导航栏使用弹性框，但是当li项内的文本放到新行上时，它会正常工作，如果{{1}的实际宽度，我会喜欢它元素会缩小。例如：

正常宽度：

缩水：

“舞蹈与放大”左右两侧的浪费空间表现'文字意味着项目重叠并且看起来很糟糕。

如何让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;
}

Answer 1

将.header_items从justify-content: space-around;更改为justify-content: space-between;，将.header_items li从padding: 2px;更改为padding: 2px 0.5em; - 更改水平填充可能会让您更接近这是你在寻找。