Гиперссылка коллекция <div>элементов

Question

Когда я пытаюсь дать гиперссылку приведенного ниже кода, он, кажется, мешает переносу изображения и связывает только значок, а не весь flex-контейнер. Я попытался поэкспериментировать с <span> элементами, но безуспешно.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row;
  transition: opacity .2s ease-in-out;
  flex-wrap: nowrap
}

.flex-item {
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  font-family: verdana;
  width: 100%;
  display: flex;
  flex-shrink: 1;
  justify-content: center;
  align-items: center;
  font-size: calc(8px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));
  z-index: 10;
  flex-wrap: nowrap
}

.flex-item:before {
  content: '';
  float: left;
  padding-top: 100%;
}

.red-box {
  background: #fd6f71;
  transition: opacity .2s ease-in-out;
  opacity: 1;
}

<div class="flex-container">
  <div class="red-box flex-item">
    <div class="lh-icon"><img src="https://i.imgur.com/NCp8Sst.png"></div>
    <a>Placeholder</a>
  </div>
</div>

Codepen:

https://codepen.io/adms2000/pen/LYVpaBB

Answer 1

Поскольку элемент <a> не может содержать <a> дочерних элементов, поэтому завершение всего .flex-контейнера с <a> не удастся. Просто измените тег заполнителя с <a> на <span>.

<a href="http://yourlinkhere.com">
  <div class="flex-container">
    <div class="red-box flex-item">
      <div class="lh-icon"><img src="https://i.imgur.com/IyLYxCc.png"></div>
      <span>Placeholder</span>
    </div>
  </div>
</a>

Надеюсь, эта помощь: D

Answer 2

Вы должны добавить ссылку перед квадратом и закрыть ее после, поэтому, когда кто-то нажимает на квадрат, он будет go к этой ссылке <a href="link.html">square css</a> Проверьте эти коды

.flex-container
{
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row;
    transition: opacity .2s ease-in-out;
    flex-wrap: nowrap
}

.flex-item 
{
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    font-family: verdana;
  
    width: 100%;
    display: flex;
    flex-shrink: 1;
    justify-content: center;
    align-items: center;
    font-size: calc(8px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));
    z-index: 10;
    flex-wrap: nowrap
}

.flex-item:before 
{
    content: '';
    float: left;
    padding-top: 100%;
}

.red-box
{
    background: #fd6f71;
    transition: opacity .2s ease-in-out;
    opacity: 1;
}

<a href="yoururl.html">
  <div class="flex-container">

  <div class="red-box flex-item">
            <div class="lh-icon"><img src="https://i.imgur.com/IyLYxCc.png"></div>
  Placeholder
</div>
</div>
<div></a>

Дайте мне знать, если эта работа для вас:)