我們經(jīng)常會遇到不同布局的照片墻展示圖片，下面來使用純CSS 實現(xiàn)照片墻集乔。
響應式布局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>
正如你可能已經(jīng)知道的,我們可以利用不同的布局方法來產(chǎn)生期望的結(jié)果去件。此前我測試了兩種不同的方法，讓我們記下我們的初始需求(見上面的圖片):
- 我想要在中等屏幕上和較小屏幕（例如<50em）上實現(xiàn)兩列布局扰路，在大屏幕（例如：50em 及以上）上實現(xiàn)4列布局
- 相鄰列之間的距離一直為8px
用 inline-block
我將會用display: inline-block 方法去構(gòu)建我們的照片墻尤溜。參照下面的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通過該計算可得:每一行總共的列間隙/每一行列數(shù)(8 px / 2 = > 4 px)碘耳。
兩列圖片寬度示意
在大屏幕中設計4列布局显设，依然保持列間距為8px，因此辛辨，列寬的計算如下： - 每一行列與列之間的空隙總和 =
3 * 8 px = > 24 px捕捂。得到的值為24px,而不是32 px,因為我刪除了每行第四列在小屏幕上的右邊距。 - 每一列的寬度=
calc(25% - 6 px)斗搞。這個6 px通過該計算可得:每一行總共的列間隙/每一行列數(shù)(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>
更新后的布局在大屏展示效果如下：
顯而易見幽七，結(jié)果不盡人意,因為柵格項目有不同的高度。我們用CSS3中的flexbox可以修復這個問題,它是一種現(xiàn)代CSS設計方法,它將使我們能夠解決許多常見的布局問題(如默認
inline-block元素)之間的差距溅呢。為了展示這個方法,我只需要更新父元素的CSS(flex容器):
div {
display: flex;
flex-wrap: wrap;
}
非常完美澡屡！如果我們現(xiàn)在預覽畫廊,我們會得到預期的結(jié)果(即所有列高相等)在所有屏幕。下面是大屏幕上看起來:
CodePen demo using flexbox with improved captions
最后我需要解釋一點：Flexbox提供justify-content屬性用于沿著flex容器的當前行的主軸對齊flex項目咐旧。但是驶鹉，請注意，此屬性不能定義我們要構(gòu)建所需畫廊布局的值铣墨。例如,｀space-between｀值在這個布局中:
當
justify-content值為 space-around 結(jié)果將為：
在上面上個例子中室埋，最后兩個項目將會很尷尬的兩端分散展示。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屬性姚淆。這是因為，根據(jù)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/
