删除弹性项目之间的差距答案

【问题标题】：Remove gap between flex item删除弹性项目之间的差距
【发布时间】：2023-01-02 21:52:02
【问题描述】：

在菜单项中，我使用的是 display: Flex

悬停时项目之间有空间

使用：对齐内容：拉伸但没有结果

我的代码

.menu {
  display: flex;
  justify-content: space-between;
}

.menu li {
  display: flex;
  padding: 10px;
}
.menu li:hover {
  background-color: #ddd;
}

.menu li a {
  display: flex;
  flex-direction: column;
  align-items: center;
}

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/>
<ul
  class="menu dflx border-top-light px-10 container py-10 justify-between items-center"
>
  <li>
    <a href=""><i class="fa-solid fa-magnifying-glass"></i> Explore</a>
  </li>
  <li>
    <a href=""><i class="fa-solid fa-location-dot"></i> Attractions</a>
  </li>
  <li>
    <a href=""><i class="fa-regular fa-star"></i> Latest Deals </a>
  </li>
  <li>
    <a href=""><i class="fa-solid fa-bars"></i> Menu </a>
  </li>
</ul>

【问题讨论】：

这就是justify-content: space-between 的工作原理，请参阅docs。
请检查图像-悬停空间显示，我正在尝试删除i.stack.imgur.com/PEuqg.png

标签： css flexbox

【解决方案1】：

只需在.menu li中使用flex: 1; justify-content: center;

工作示例

.menu {
  display: flex;
  justify-content: space-between;
}

.menu li {
  display: flex;
  padding: 10px;
  flex: 1;
  justify-content: center;
}
.menu li:hover {
  background-color: #ddd;
}

.menu li a {
  display: flex;
  flex-direction: column;
  align-items: center;
}

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/>
<ul
  class="menu dflx border-top-light px-10 container py-10 justify-between items-center"
>
  <li>
    <a href=""><i class="fa-solid fa-magnifying-glass"></i> Explore</a>
  </li>
  <li>
    <a href=""><i class="fa-solid fa-location-dot"></i> Attractions</a>
  </li>
  <li>
    <a href=""><i class="fa-regular fa-star"></i> Latest Deals </a>
  </li>
  <li>
    <a href=""><i class="fa-solid fa-bars"></i> Menu </a>
  </li>
</ul>

【讨论】：