Flexbox 中活动项目的背景颜色仅影响文本，所需的行为是整个空间周围

Question

使用

div

类创建

.navbar

并通过

display: flex;

为我所在的每个页面实现它之后，我希望导航栏中的活动页面的整个背景具有不同的颜色。目前，它只影响文本。

通过导航栏的不同实现实现了所需的行为，但它导致了不同的问题。

.navbar {
  background-color: #0066b1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.navbar a {
  color: #fff773;
  text-decoration: none;
}

.navbar div.active {
  background-color: #233440;
}

<div class="navbar">
  <div class="active"><a href="HomePage.html">Home</a></div>
  <div><a href="LorePage.html">Lore</a></div>
  <div><a href="CharacterCreator.html">Character Creator</a></div>
  <div><a href="Roster.html">Roster</a></div>
</div>

Answer 1

问题在于，没有为

flex

内的每个

div

分配

.navbar

（增长、收缩和基础的简写）值。因此，

div

的宽度只需适合其中的内容即可。为每个 div 设置属性

flex: 1 1 auto;

实质上是说，该元素的

grow

和

shrink

与该父级 (

.navbar

) 中的所有其他元素的比例相同，并设置

basis

（默认/基本宽度）到

auto

，这会将元素宽度设置为尽可能多地填充空间，同时考虑其他同级元素 (

div

)。

您可以删除

justify-content: space-around;

，然后添加此规则：

.navbar > div {
  flex: 1 1 auto;
  text-align: center
}

.navbar {
  background-color: #0066b1;
  display: flex;
  flex-wrap: wrap;
}

.navbar a {
  color: #fff773;
  text-decoration: none;
}

.navbar > div {
  flex: 1 1 auto;
  text-align: center
}

.navbar div.active {
  background-color: #233440;
}

<div class="navbar">
  <div class="active"><a href="HomePage.html">Home</a></div>
  <div><a href="LorePage.html">Lore</a></div>
  <div><a href="CharacterCreator.html">Character Creator</a></div>
  <div><a href="Roster.html">Roster</a></div>
</div>