Flexbox - 图像溢出而不是环绕

Question

我正在尝试制作一个 Flexbox 图片库，以使悬停的图片展开。

目前，flex wrap 无法正常工作，某些图像位于框外而不是环绕。

如何使图像环绕并填充空白，而不是溢出容器 div？

codepen - https://codepen.io/anon/pen/XeyyPg

html

<div class="container">
  <img src="http://via.placeholder.com/274x295">
  <img src="http://via.placeholder.com/274x295">
  <img src="http://via.placeholder.com/274x295">
  <img src="http://via.placeholder.com/274x295">
  <img src="http://via.placeholder.com/274x295">
  <img src="http://via.placeholder.com/274x295">
  <img src="http://via.placeholder.com/274x295">
</div>

CSS

.container {
  border: solid 1px red;
  display: flex;
  max-width: 1370px;
  height: 590px;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: flex-start;
}

img {
  height: 295px;
  width: 274px;
  align-self: flex-start;
}

img:hover {
  width:548px;
  height: 590px;

}

此外，如果当前没有悬停图像，请忽略布局。这个想法是画廊将始终有一个放大的图像处于活动状态。

Answer 1

在我看来，图像在悬停时需要重新排序以避免其他人被推到外面。https://codepen.io/gc-nomade/pen/JreVjZ

img:nth-child(2n):hover {
  order: 2;/* here , image on the second row /last of each columns*/
}

.container {
  border: solid 1px red;
  display: flex;
  max-width: 1370px;
  height: 590px;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: flex-start;
}

img {
  height: 295px;
  width: 274px;
  align-self: flex-start;
}

img:hover {
  width: 548px;
  height: 590px;
}

<div class="container">
  <img src="http://via.placeholder.com/274x295">
  <img src="http://via.placeholder.com/274x295">
  <img src="http://via.placeholder.com/274x295">
  <img src="http://via.placeholder.com/274x295">
  <img src="http://via.placeholder.com/274x295">
  <img src="http://via.placeholder.com/274x295">
  <img src="http://via.placeholder.com/274x295">
</div>

Answer 2

您可以将图像放入容器 DIV 中，使 position: relative 和图像 position: absolute 在悬停时具有不同的顶部/底部设置，具体取决于它们是在顶行还是底行：

.container {
  border: solid 1px red;
  display: flex;
  max-width: 1370px;
  height: 590px;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: flex-start;
}

.imgcontainer {
  height: 295px;
  width: 274px;
  align-self: flex-start;
  position: relative;
}
img {
  width: 100%;
  height: auto;
}
img:hover {
  width:548px;
  height: 590px;
  position:absolute;
  z-index: 10;
}
.imgcontainer:nth-child(odd) > img:hover {
  left: 0;
  top: 0;
}
.imgcontainer:nth-child(even) > img:hover {
  left: 0;
  bottom: 0;
}

<div class="container">
  <div class="imgcontainer"><img src="http://via.placeholder.com/274x295?text=1"></div>
  <div class="imgcontainer"><img src="http://via.placeholder.com/274x295?text=2"></div>
  <div class="imgcontainer"><img src="http://via.placeholder.com/274x295?text=3"></div>
  <div class="imgcontainer"><img src="http://via.placeholder.com/274x295?text=4"></div>
  <div class="imgcontainer"><img src="http://via.placeholder.com/274x295?text=5"></div>
  <div class="imgcontainer"><img src="http://via.placeholder.com/274x295?text=6"></div>
  <div class="imgcontainer"><img src="http://via.placeholder.com/274x295?text=7"></div>
</div>

https://codepen.io/anon/pen/NaEmWx

Answer 3

尝试将flex-direction 更改为row：

.container {
    border: solid 1px red;
    display: flex;
    max-width: 1370px;
    height: 590px;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
}