Flex布局之justify-content属性详解

 justify-content : 设置基于flex布局下主轴水平对齐方式（受flex-decration影响）

.document{
    display: flex; /* 必须 */
    justify-content: start | end | flex-start | flex-end | space-between | space-around | space-evenly
}

start：以主轴的左侧或交叉轴的顶部为起点。

end：以主轴的右侧或交叉轴的终点为起点。

flex-start：以当前轴的起点方向为起点。（受flex-decration影响）

flex-end：同flex-start且相反。

主要展示区别：（以0代表元素，以 - 代表一个单位间距，以 | 代表父元素边框边界）

space-between：起点终点各有一个元素且与边界无间距，元素单位间距叠加

| 0 - - 0 - - 0 - - 0 - - 0 - - 0 |

space-around：与space-between相似，收尾与父元素边框有间距，元素单位间距叠加

| -  0  -  -  0  -  -  0  -  -   0  - |

space-evenly：与space-around相似，元素间单位间距不叠加

| -  0  -  0  -  0  -  0  - |