现代CSS 实现照片画廊布局

我们经常会遇到不同布局的照片墙展示图片，下面来使用纯CSS 实现照片墙。

响应式布局Responsive Layout

首先我们设想画廊在大屏上面的显示效果是这样的：

大屏显示效果

在较小的屏幕上(例如< 50 em),应该有以下效果:

较小屏幕显示效果

这个标签简单写成

正如你可能已经知道的,我们可以利用不同的布局方法来产生期望的结果。此前我测试了两种不同的方法，让我们记下我们的初始需求(见上面的图片):

• 我想要在中等屏幕上和较小屏幕（例如<50em）上实现两列布局，在大屏幕（例如：50em 及以上）上实现4列布局
• 相邻列之间的距离一直为8px

用 inline-block

我将会用display: inline-block 方法去构建我们的照片墙。参照下面的CSS：

div {
  font-size: 0;
}
a {
    font-size: 16px; 
    display: inline-block;
    margin-bottom: 8px;
    width: calc(50% - 4px);
    margin-right: 8px;
}
a:nth-of-type(2n) {
    margin-right: 0;
}
@media screen and (min-width: 50em) {
    a {
      width: calc(25% - 6px);
    }
    a:nth-of-type(2n) {
      margin-right: 8px;
    }
    a:nth-of-type(4n) {
      margin-right: 0;
    }
}

解释一下上面的代码：
默认情况下,inline-block元素之间有一个空格。一个解决这个问题的方法是父元素的字体大小设置为0。这意味着我们要重置所有子元素的字体大小(在我们的例子中没有必要)。
在小屏幕上，我们的2列布局相邻列的间距为8px。
这个列的宽度计算如下：

• 每一行列与列之间的空隙总和 =1 * 8 px = > 8 px。得到的值为8px,而不是16 px,因为我删除了每行第二列在小屏幕上的右边距。
• 每一列的宽度=calc(50% - 4 px)。这个4 px通过该计算可得:每一行总共的列间隙/每一行列数(8 px / 2 = > 4 px)。
  
  

  两列图片宽度示意
  
  在大屏幕中设计4列布局，依然保持列间距为8px，因此，列宽的计算如下：
• 每一行列与列之间的空隙总和 = 3 * 8 px = > 24 px。得到的值为24px,而不是32 px,因为我删除了每行第四列在小屏幕上的右边距。
• 每一列的宽度= calc(25% - 6 px)。这个6 px通过该计算可得:每一行总共的列间隙/每一行列数(24 px / 4= > 6 px)。
  
  

  四列图片宽度示意
  
  codepen for display: inline-block method

---

用Flexbox

上面的解决方案工作很好,但也有一些缺点。为了演示这个缺点,我们假设每个图像都包含一个标题。
更新后的代码如下：

    
      

        
      
Some text here
      
    
    

更新后的布局在大屏展示效果如下：

带有标题的图片展示

显而易见，结果不尽人意,因为栅格项目有不同的高度。我们用CSS3中的flexbox可以修复这个问题,它是一种现代CSS设计方法,它将使我们能够解决许多常见的布局问题(如默认 inline-block元素)之间的差距。为了展示这个方法,我只需要更新父元素的CSS(flex容器):

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

非常完美！如果我们现在预览画廊,我们会得到预期的结果(即所有列高相等)在所有屏幕。下面是大屏幕上看起来:

Flexbox 布局画廊

CodePen demo using flexbox with improved captions

---

最后我需要解释一点：Flexbox提供justify-content属性用于沿着flex容器的当前行的主轴对齐flex项目。但是，请注意，此属性不能定义我们要构建所需画廊布局的值。例如,｀space-between｀值在这个布局中:

space-between

当 justify-content值为 space-around 结果将为：

space-around

在上面上个例子中，最后两个项目将会很尴尬的两端分散展示。CSS 样式是这样的：

div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* or space-around */
} 

a {
  display: inline-block;
  margin-bottom: 8px;
  width: calc(50% - 4px);
}

@media screen and (min-width: 50em) {
  a {
    width: calc(25% - 6px);
  }
}

在这种情况下，我没有为flex项目分配margin-right属性。这是因为，根据justify-content属性的值，浏览器负责在其容器中自适应分配flex项目。
CodePen demo using the justify-content property

https://www.sitepoint.com/using-modern-css-to-build-a-responsive-image-grid/
http://gridbyexample.com/