【发布时间】：2019-04-09 12:42:42
【问题描述】：
我正在尝试使用 CSS 创建一个图片库，以这种方式组织：
我使用 PHP 加载文件夹的每个图像，并创建包含相同数量图片（在我的情况下为 4 个，垂直对齐）的元素，我称之为行。这些行水平对齐。
我希望这些行/列调整它们的宽度，直到它们占据所有可用的垂直空间，这样如果我有 4 个垂直图像，则行看起来更薄，如果我有 4 个横向格式图像，则行水平更宽。见图：
现在我只有这样的东西：
如果行太多，我就在右边做一个水平滚动条。
我的html代码如下：
<div class="gallery">
<div class="row">
<div class="frame">
<img class="gallery-img">
</div>
<div class="frame">
<img class="gallery-img">
</div>
<div class="frame">
<img class="gallery-img">
</div>
<div class="frame">
<img class="gallery-img">
</div>
</div>
<!-- other rows -->
</div>
我的 CSS 如下：
body {
background-color: #dddddd;
}
.gallery {
width: 100%;
overflow: auto;
height: 100%;
display: flex;
flex-wrap: nowrap;
}
.row {
display: flex;
flex-direction: column;
height: 100%;
flex-wrap: nowrap;
align-content: stretch;
align-items: stretch;
justify-content: space-around;
}
.frame {
margin: 2px;
overflow: hidden;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
box-shadow: inset 5px 5px 40px rgba(0,0,0,0.6);
-webkit-transition: box-shadow;
transition: all 0.5s ease;
}
.frame:hover {
box-shadow: inset 3px 3px 10px rgba(0,0,0,0.6);
}
.gallery-img {
-webkit-transition: transform;
transition: all 0.5s ease;
transform: scale(1);
position: relative;
z-index: -1;
}
.frame:hover .gallery-img {
transform: scale(1.1);
}
我不知道flex-grow 是否是这里的解决方案。我已经阅读了auto-fit 或auto-fill 的属性，但我不确定如何或在何处使用它。我希望这还没有在其他地方得到回答，但我无法找到类似的话题。问题是我需要保持图像比例，而不仅仅是填充空白空间。
提前感谢您的帮助！
【问题讨论】：
-
只是为了澄清您希望图像本身定义行的宽度以及行占据整个视口垂直空间的 100%？
-
没错，我不想指定固定宽度，因为我只是用 php 生成行和一个包含我的图片的文件夹，因此它们可以不断变化。
标签： html css flexbox alignment image-gallery