css - 如何制作带有附加链接的 Flexbox Gallery Images 使它们成为 flex childs

Question

我正在尝试使用 flexbox 中的链接制作图片。问题是，当我添加 <a href=""> , imgages 不再成为 .gallery 类的 flex 元素。

我想不通，有没有办法让图像保持其上有链接的容器的子级？我希望图像是 flex-items 并且可以通过链接点击。

.Portfolio {
  display: flex;
  background-color: ;
  width: 80%;
  flex-wrap: wrap;
  margin: 0 auto;
}

img {
  background-color: orange;
}

.zoom:hover {
  transform: scale(1.3);
  /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

<div class="boxContainer">
  <div class="Portfolio">
    <a href="#"><img class="zoom" src="01.jpg" width="30%" alt=""></a>
    <a href="#"><img class="zoom" src="01.jpg" width="30%" alt=""></a>
    <a href="#"><img class="zoom" src="01.jpg" width="30%" alt=""></a>
    <a href="#"><img class="zoom" src="01.jpg" width="30%" alt=""></a>
    <a href="#"><img class="zoom" src="01.jpg" width="30%" alt=""></a>
    <a href="#"><img class="zoom" src="01.jpg" width="30%" alt=""></a>
    <a href="#"><img class="zoom" src="01.jpg" width="30%" alt=""></a>
    <a href="#"><img class="zoom" src="01.jpg" width="30%" alt=""></a>
    <a href="#"><img class="zoom" src="01.jpg" width="30%" alt=""></a>
    <a href="#"><img class="zoom" src="01.jpg" width="30%" alt=""></a>
  </div>
</div>

Answer 1

我使用无序列表找到了“解决方案”<ul>与列表 <li>图片 <img src="#">并用 <a> 包裹标签。 <ul>成为 flex 容器并且 <li>变成 flex 元素!也可以是有序列表。

*{
  list-style: none;
}


ul{
  display: flex;
  flex-wrap: wrap;
}


img:hover{
   transform: scale(1.1);
}

    <ul>
      <li><a href="#"><img src="img/01.png" width="300" alt=""></a></li>
      <li><a href="#"><img src="img/02.png" width="300" alt=""></a></li>
      <li><a href="#"><img src="img/03.png" width="300" alt=""></a></li>
      <li><a href="#"><img src="img/04.png" width="300" alt=""></a></li>
      <li><a href="#"><img src="img/05.png" width="300" alt=""></a></li>
      <li><a href="#"><img src="img/06.png" width="300" alt=""></a></li>
    </ul>