這一章節(jié)我們來(lái)學(xué)習(xí)justify-content屬性，本屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。結(jié)合上一節(jié)的布局例子進(jìn)行理解，屬性值分別為：

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

flex-start：交叉軸的起點(diǎn)對(duì)齊

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

實(shí)現(xiàn)效果：

flex-end：右對(duì)齊

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

實(shí)現(xiàn)效果：

center： 居中

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

實(shí)現(xiàn)效果：

space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。

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

實(shí)現(xiàn)效果：

space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

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

實(shí)現(xiàn)效果：