css圖片響應式+垂直水平居中2 模擬flexbox justify-content的space-between,space-around

轉載請註明： TheViper http://www.cnblogs.com/TheViper 

上一篇說的是限定圖片組最大寬度狀況下，其中圖片的響應式+垂直水平居中。

實際上，結合本屌的這篇模擬flexbox justify-content的space-between,space-around,而後不限定圖片組最大寬度,會發現當瀏覽器窗口較寬的時候，會出現和flexbox space-between同樣的效果，即一行的第一個圖片在最左邊，最後一個圖片在最右邊，圖片間間距同樣。此時設置圖片間的百分比形式左右margin，至關於設置圖片間間距的最小值，一旦間距達到最小值，窗口再小的話，圖片會跳到下一行。而當瀏覽器窗口不夠寬時，就會出現和上一篇中同樣的效果。

看看效果

實現

1.給包裹圖片的li

    li{
        list-style-type: none;
        display: inline-block;
        max-width: 200px;
        width: 29%;
        border:1px solid red;
        position: relative;
        margin: 5px 1%;
    }

經過設置width調整窗口不寬狀況下的列數。好比width:22%會使得列數變爲4.另外，不要把列數設爲2，由於這時兩列間有大片空白，這是text-align:justify模擬的缺陷。

2.對圖片組的父元素ul class='justify'

    @media (-webkit-min-device-pixel-ratio:0) {
    .justify:after {
            content: "";
            display: inline-block;
            width: 100%;
        }
    }
    .justify {
        text-align: justify;
        text-justify: inter-ideograph;
        *zoom: 1; 
        -moz-text-align-last: justify;
        -webkit-text-align-last: justify;
        text-align-last: justify;
    }

3.添加<li class='justify_fix'></li>

    .justify_fix{
        display:inline-block; 
        width:100%; 
        height:0; 
        overflow:hidden;
        border:0;
    }

完成！就是這麼簡單！例子下載