justify-content作用： 用于设置子元素在主轴的对齐方式

作用： 设置每个flex元素在交叉轴上的默认对齐方式

什么是主轴？
如果是子元素水平排列，则x轴为主轴
如果子元素竖向排列，则y轴为主轴

总结：
判断主轴和交叉轴的依据是看子元素是水平排列还是竖向排列。
判断的顺序为：子元素的排列方向 — 主轴 — 交叉轴

flex-end示例：

效果：

center示例：

<style>
    #div0{
        width:380px;
        background-color: violet;
        display:flex;
        flex-flow: row wrap;
        justify-content: center;
    }
    #div0 div{
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
</style>

效果：

space-between示例：

<style>
    #div0{
        width:380px;
        background-color: violet;
        display:flex;
        flex-flow: row wrap;
        justify-content: space-between;
    }
    #div0 div{
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
</style>

space-around示例：

<style>
    #div0{
        width:380px;
        background-color: violet;
        display:flex;
        flex-flow: row wrap;
        justify-content: space-between;
    }
    #div0 div{
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
</style>

效果：