模擬flexbox justify-content的space-between

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

（本文的初衷是彌補一點響應式設計在低版本瀏覽器中的不足，因此如果你對響應式不感冒，請無視）

flexbox?

關於flexbox，本屌無法專業的說很多，可以參見Flexible boxes更加優雅的Web布局。這是一個很厲害的東西，而其中有一個justify-content屬性，用來指定水平方向上布局排版。其中的一個屬性space-between，這個可以讓子元素被平均分布,第一子元素在容器最左邊，最后一個子元素在最右邊.另一個屬性space-around可以讓一列子元素均勻分布。

（注意，父元素設置了display:flex,那只作用於這個父元素下的第一級子元素。也就是說，有div->ul->li,div設置了flex,則li元素是沒有效果的）。

比如下圖中的倒數第二行是space-between，最后一行是space-around。

 

text-align:justify

justify表示兩端對齊文本，

如果在加上inline-block這個外表是inline,內在是block的“兩面派”，就可以實現justify-content:space-between了。因為justify針對的是inline元素。

具體的實現,在張鑫旭博客中說的很詳細了，參見display:inline-block/text-align:justify下列表的兩端對齊布局

需要注意幾點:

1.text-align:justify存在兼容性問題，解決方案可以參見正美的css 文本兩端對齊。

2.子元素會繼承text-align:justify，出現文字兩端對齊

解決方法可以參見阿里媽媽的cube css解決方案中的兩端對齊布局，在子元素中添加class dib.

/* 子元素取消兩端對齊 */
.dib {
    -moz-text-align-last: auto;
    -webkit-text-align-last: auto;
    text-align-last: auto;
    text-justify: auto;
    text-align: left;
    letter-spacing: normal;
    word-spacing: normal;
}

3.使最后一行左對齊的justify_fix類標簽數量是一行可以容納的最多inline-block減2，不必是張鑫旭文中說的"每行元素的列表個數".

因為最后一行至少有2個inline-block,才會出現兩端對齊，而justify_fix類標簽實際上是創建一個和列表寬度一樣的inline-block,把最后一行的列表元素向左邊"頂"過去。

實際用的時候，先用響應式設計視圖，把寬度調到需要適配的最大寬度，比如1920px,看一行可以放下多少個列表元素,然后減2就可以了。

4.如果列表元素是動態插入的話，在列表元素間要加空格，否則在現代瀏覽器中，布局無效

ff

ie8

解決

可以看到avalon根據模板，動態插入的列表元素之間沒有間距。

最后看下，用text-align:justify模擬的flexbox效果是否和flexbox一樣

下面flexbox的justify-content設置的是space-around.

例子下載

更新

5.由於模擬是基於text-align:justify+inline-block.所以，inline-block間會有間距，在這里去除間距不能用去除inline-block元素間間距的N種方法里面的去掉HTML中的空格，也就是說

                    <li class="cur"></li
                    ><li></li
                    ><li></li>

這種寫法會使text-align:justify失效，這也是上面第四點失效的原因。只能用其他方法去除inline-block間距。

更新 6.2

6.之前沒在chrome測試，今天發現對於chrome text-align:justify的兼容

@media (-webkit-min-device-pixel-ratio:0) {
 .justify:after {
        content: "";
        display: inline-block;
        width: 100%;
    }
}

.justify和flexbox一樣，只能放在div->ul->li的ul上，不能放在div上。否則在chrome中不起作用。