Flex布局之justify-content属性详解

.document{
    justify-content: start | end | flex-start | flex-end | space-between | space-around | space-evenly
}

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

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

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

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

space-between：起点和终点分别占有一个，中间部分间距相等。

以0代表元素，以 - 代表间距，以 | 代表边界

space-between：起点终点各有一个，中间相等

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

space-around：每个的两侧间距相等。注意：相邻的两个间距会叠加。如下方概念所示

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

space-evenly：每两个之间的间距不会叠加，且间距一样。如下方概念所示

| -  0  -  0  -  0  -  0  - |