這一章節我們來學習justify-content屬性，本屬性定義了項目在主軸上的對齊方式。結合上一節的布局例子進行理解，屬性值分別為：

 justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start：交叉軸的起點對齊

 .box {
        background: blue;
        display: flex;
        justify-content: flex-start;
    }

實現效果：

flex-end：右對齊

 .box {
        background: blue;
        display: flex;
        justify-content: flex-end;
    }

實現效果：

center： 居中

 .box {
        background: blue;
        display: flex;
        justify-content: center;
    }

實現效果：

space-between：兩端對齊，項目之間的間隔都相等。

 .box {
        background: blue;
        display: flex;
        justify-content: space-between;
    }

實現效果：

space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

.box {
        background: blue;
        display: flex;
        justify-content: space-around;
    }

實現效果：