сделать полную площадь в гибком контейнере, который можно щелкнуть, - согнуть теги с привязкой по элементам, чтобы заполнить их доступное пространство в неупорядоченном списке?

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; но теперь яхочу продемонстрировать, что в цвете).

Сделать оставшееся заполнение div * горизонтальным * пробел во 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;

Не работает

Добавление определенной ширины к дочерним элементам flex

Кажется, что он сломал контейнер flexbox

align-content: stretch;

Не сработало

Как получить гибкие теги привязки по элементам, чтобы заполнить их доступное пространство в неупорядоченном списке?

Answer 1

Чтобы все было просто, нужно добавить 3 строки CSS.Применить flex-grow: 1 к .links li.Якоря внутри них (которые являются не гибкими детьми) должны быть центрированы, 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;
}

.links a {
  font-family: ralewayLight, sans-serif;
  padding: 10px 0 10px;
  display: block;
  text-align: center;
}

.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>

jsFiddle

Answer 2

На самом деле, если вы хотите сделать его гладким, вам нужно будет предоставить каждому дочернему элементу 100% ширину и высоту его родительского контейнера, чтобы эффект наведения фона привязки охватывал всю ширину контейнера.

Вот CSS:

   * {
        box-sizing: border-box;
    }
    .links {
        margin: 0;
        padding: 0;
        border: 1px solid gray;
        height: 80px;
        display: flex;
        align-items: center;
    }
    .links ul {
        list-style-type: none;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        height: 100%;
        width: 100%;
    }
    .links li {
        display: flex;
        flex-grow: 1;
        height: 100%;
    }
    .links a {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: ralewayLight, sans-serif;
        width: 100%;
    }
    .links a:hover {
        text-decoration: none;
        color: #fff;
        background-color: #000;
    }
    a, li, ul {
        padding: 0;
        margin: 0;
    }

<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>

Answer 3

Попробуйте добавить flex-grow: 1; к элементу li, отцентрируйте тег <a> и сделайте его элементом уровня блока:

.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>