如何使用 flexbox 制作我的图片库

Question

我想知道如何让我的风景图库用风力涡轮机肖像照片旁边的其他图像填充空白空间。

我应用我的css代码的网站是photography.comsma.com

这是我的css

    .gallery{
        padding: 50px;
    }
    .ImageTile{

        padding: 10px;
        width: 50%;
        max-width: 100%;
        max-height: 100%;
        display: inline-block;
    }
    .ImageTile img {

        height: auto;
        width: 100%;
    }
    @media only screen and (max-width:1100px) {
        .gallery{
            padding:5%;
        }
        .ImageTile{
            width: 100%;
            max-width: 100%;
            max-height: 100%;
            display: inline-block;
        }

    }

这是我的html

<div class="gallery">
    <div class="ImageTile">
        <img src="/assets/Photography/Landscapes/1.jpg">
    </div>
    <div class="ImageTile">
        <img src="/assets/Photography/Landscapes/2.jpg">
    </div>
    <div class="ImageTile">
        <img src="/assets/Photography/Landscapes/3.jpg">
    </div>
    <div class="ImageTile">
        <img src="/assets/Photography/Landscapes/4.jpg">
    </div>
    <div class="ImageTile">
        <img src="/assets/Photography/Landscapes/5.jpg">
    </div>
    <div class="ImageTile">
        <img src="/assets/Photography/Landscapes/6.jpg">
    </div>
    
</div>

Answer 1

在这种特殊情况下，我会进行 3 处修改：

首先，我会将此规则添加到 ImageTile：

.ImageTile{
          width: 100%;
 }

然后，我会在 html 标签中为高大的图片定义一个子类：

    <div class="ImageTile tall">
      <img src="https://photography.comsma.com/assets/Photography/Landscapes/2.jpg">
    </div>

最后，我会针对更大的屏幕进行@media 查询。一条规则使画廊成为网格，一条规则让高大的图片将自己定位在第 2 列，并使用 3 个普通图像空间作为高度：

@media only screen and (min-width:1100px) {
    .gallery{
        display:grid;
        grid-template: "ImageTile ImageTile";
    }
   .ImageTile.tall {
      grid-row: 1/span 3;
      grid-column: 2;
  }
    

}

我会丢失小屏幕的@media 查询，或者可能只是保留填充规则。

这是我的代码笔，您可以看到它的实际效果：

Codepen for COMSMA PHOTOGRAPHY

Answer 2

.gallery{
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-flow: row wrap;
   }