Remove gap between flex item-CodePudding

In menu item, i am using display: Flex

on hover there is space between items

Used: Align-content: stretch but no result

My Code

.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
  
>
  <li>
    <a href=""><i ></i> Explore</a>
  </li>
  <li>
    <a href=""><i ></i> Attractions</a>
  </li>
  <li>
    <a href=""><i ></i> Latest Deals </a>
  </li>
  <li>
    <a href=""><i ></i> Menu </a>
  </li>
</ul>

CodePudding user response：

Just use flex: 1; justify-content: center; in .menu li

Working example

.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
  
>
  <li>
    <a href=""><i ></i> Explore</a>
  </li>
  <li>
    <a href=""><i ></i> Attractions</a>
  </li>
  <li>
    <a href=""><i ></i> Latest Deals </a>
  </li>
  <li>
    <a href=""><i ></i> Menu </a>
  </li>
</ul>