html - 在可点击的 flex 容器中创建完整区域 - flex 逐项 anchor 标记以填充其在无序列表中的可用空间？

Question

考虑以下示例:

.links {
        margin: 0;
        padding: 0;
        border: 1px solid gray;
}

.links ul {
        list-style-type: none;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-content: stretch;
    }
    
.links li {
        padding: 10px 0 10px;
}

.links a {
        font-family: ralewayLight, sans-serif;
        padding: 10px 0 10px;
}

.links a:hover {
        text-decoration: none;
        color: #fff;
        background-color: #000;
}

<div class="links">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div>

悬停时，我需要让黑色区域在它的可用空间中延伸，这样当悬停时，黑色会在左侧和右侧延伸，超出 <a> 的限制。标记并与另一个标记相遇，因此所有内容都均匀分布并且整个区域都是可点击的。

我这样做(我想用 justify-content: space-evenly; 但我现在想用颜色来演示)。

Make div fill remaining *horizontal* space in flexbox

.links {
        margin: 0;
        padding: 0;
        border: 1px solid gray;
}

.links ul {
        list-style-type: none;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-content: stretch;
    }
    
.links li {
        padding: 10px 0 10px;
}

.links a {
        font-family: ralewayLight, sans-serif;
        padding: 10px 0 10px;
        flex-grow: 1;
}

.links a:hover {
        text-decoration: none;
        color: #fff;
        background-color: #000;
}

<div class="links">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div>

悬停状态仍然停留在禁区内。

如何才能在悬停时使黑色均匀分布在每个元素上，并且在悬停时整个区域都可以点击？

此外flex-grow: 1;我试过:

1. align-items: stretch;

没用

1. 为 flex 子元素添加特定宽度

似乎破坏了 flexbox 容器

1. align-content: stretch;

没用

如何让 flex 分项 anchor 标记填充无序列表中的可用空间？

Answer 1

尝试添加 flex-grow: 1;给你的li元素，居中你的<a>标记并使其成为 block 级元素:

.links {
   margin: 0;
   padding: 0;
   border: 1px solid gray;
}

.links ul {
   list-style-type: none;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-evenly;
   align-content: stretch;
}
    
.links li {
   padding: 10px 0 10px;
   flex-grow: 1; /* add this */
}

.links a {
   font-family: ralewayLight, sans-serif;
   padding: 10px 0 10px;
   flex-grow: 1;
   display: block; /* add this */
   text-align: center; /* add this */
}

.links a:hover {
   text-decoration: none;
   color: #fff;
   background-color: #000;
}

<div class="links">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div>