我们经常会遇到不同布局的照片墙展示图片，下面来使用纯CSS 实现照片墙。
响应式布局Responsive Layout
首先我们设想画廊在大屏上面的显示效果是这样的：
大屏显示效果
在较小的屏幕上(例如< 50 em),应该有以下效果:
较小屏幕显示效果
这个标签简单写成
<div>
<a href="path-to-the-image">
<figure>
<img src="path-to-the-image" alt="">
</figure>
</a>
<!-- other anchors here ... --></div>
正如你可能已经知道的,我们可以利用不同的布局方法来产生期望的结果。此前我测试了两种不同的方法，让我们记下我们的初始需求(见上面的图片):
- 我想要在中等屏幕上和较小屏幕（例如<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
上面的解决方案工作很好,但也有一些缺点。为了演示这个缺点,我们假设每个图像都包含一个标题。
更新后的代码如下：
<div>
<a href="path-to-the-image">
<figure>
<img src="path-to-the-image" alt="">
<figcaption>Some text here</figcaption>
</figure>
</a>
<!-- other anchors here ... -->
</div>
更新后的布局在大屏展示效果如下：
带有标题的图片展示
显而易见，结果不尽人意,因为栅格项目有不同的高度。我们用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/
网友评论