代码之家  ›  专栏  ›  技术社区  ›  Dmitriy

使用CSS网格/Flexbox的专门布局

  •  1
  • Dmitriy  · 技术社区  · 6 年前

    我希望我能得到一些技巧来实现我一直试图重新创建的某个图像库布局,以下是布局: enter image description here

    链接到该站点 https://www.styleshout.com/templates/preview/Sublime10/index.html

    正如您所看到的,每一行上的一个图像比另一行高一点,并且其他行完全适合彼此。

    下面是我做的一次微不足道的代码笔尝试,但我完全被困在如何获得这种布局上:

    body {
      margin: 0;
      border-sizing: border-box;
      display: flex;
      justify-content: center;
      width: 100%;
    }
    
    figure {
      margin: 0;
      display: inline;
    }
    
    .gallery-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 600px;
        
    
        figure {
          height: 350px;
          picture img {
            width: 350px;
            height: 350px;
          }
        }
      }
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Flexible Image Gallery</title>
    </head>
    <body>
      <div class="gallery-container">
          <figure>
            <picture>
              <img src="https://source.unsplash.com/random/204x200" alt="" />
            </picture>
          </figure>
          <figure>
            <picture>
              <img src="https://source.unsplash.com/random/209x200" alt="" />
            </picture>
          </figure>
          <figure>
            <picture>
              <img src="https://source.unsplash.com/random/205x200" alt="" />
            </picture>
          </figure>
          <figure>
            <picture>
              <img src="https://source.unsplash.com/random/202x200" alt="" />
            </picture>
          </figure>
          <figure>
            <picture>
              <img src="https://source.unsplash.com/random/201x200" alt="" />
            </picture>
          </figure>
          <figure>
            <picture>
              <img src="https://source.unsplash.com/random/206x200" alt="" />
            </picture>
          </figure>
        </div>
    </body>
    </html>

    谢谢你的帮助!

    1 回复  |  直到 6 年前
        1
  •  2
  •   Hai Pham    6 年前

    以下是我使用flex的解决方案:

    • 使用类创建2个div .column
    • 添加类 .grow flex: 1.2
    • flex: 1 使其高度在容器中增长

    body {
        margin: 0;
        border-sizing: border-box;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
    figure {
        margin: 0;
        display: inline;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    figure > img {
        flex: 1;
        object-fit: cover;
    }
    .column {
        display: flex;
        flex-flow: column wrap;
        height: 800px;
        width: 200px;
        overflow: hidden;
    }
    
    .grow {
        flex: 1.2;
    }
    
    .gallery-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 600px;
    }
    <body>
        <div class="gallery-container">
            <div class="column">
                <figure>
                    <img src="https://source.unsplash.com/random/204x200" alt="" />
                </figure>
                <figure>
                    <img src="https://source.unsplash.com/random/209x200" alt="" />
                </figure>
                <figure class="grow">
                    <img src="https://source.unsplash.com/random/205x200" alt="" />
                </figure>
            </div>
            <div class="column">
                <figure class="grow">
                    <img src="https://source.unsplash.com/random/202x200" alt="" />
                </figure>
                <figure>
                    <img src="https://source.unsplash.com/random/201x200" alt="" />
                </figure>
                <figure>
                    <img src="https://source.unsplash.com/random/206x200" alt="" />
                </figure>
            </div>
        </div>
    </body>
    
    </html>
    希望这有助于解决您的问题。