CSS實現頁面水平均勻佈局

由於頁面動態加載數據，水平方向不能設置固定寬度，必須實現水平彈性佈局
justify-content 屬性
內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿着彈性容器的主軸線（main axis）對齊。
justify-content 語法如下：
justify-content: flex-start | flex-end | center | space-between | space-around
各個值解析:

flex-start：
彈性項目向行頭緊挨着填充。這個是默認值。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，而後續彈性項依次平齊擺放。

flex-end：
彈性項目向行尾緊挨着填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而後續彈性項依次平齊擺放。

center：
彈性項目居中緊挨着填充。（如果剩餘的自由空間是負的，則彈性項目將在兩個方向上同時溢出）。

space-between：
彈性項目平均分佈在該行上。如果剩餘空間爲負或者只有一個彈性項，則該值等同於flex-start。否則，第1個彈性項的外邊距和行的main-start邊線對齊，而最後1個彈性項的外邊距和行的main-end邊線對齊，然後剩餘的彈性項分佈在該行上，相鄰項目的間隔相等。

space-around：
彈性項目平均分佈在該行上，兩邊留有一半的間隔空間。如果剩餘空間爲負或者只有一個彈性項，則該值等同於center。否則，彈性項目沿該行分佈，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。

父元素加上CSS如下：

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}