space-around; 项目位于各行之前、之间、之后都留有空白的容器内。

Pasted Graphic.png

justify-content: space-between   项目位于各行之间留有空白的容器内

image.png

justify-content: center 项目居中显示

image.png

flex-start：弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。

image.png

flex-end：弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。

image.png

补充1

align-content是对应的竖直分布的
相关的属性和justify-content 一致

补充2

align-content 和 align-items区别

<div class="child-1">
    <div class="child-2">                   
    </div>
    <div class="child-2">                   
    </div>
</div>


<style type="text/css">
        *{
            margin:0px;
            padding: 0px;
        }
        div{
            border: 1px solid #0f0f0f;
        }
        .child-1{
            margin: 30px auto;
            display: flex;
            width: 100px;
            height: 60px;
            justify-content: space-around;
            align-content: center;
        }
        .child-2{
            width: 30px;
            height: 20px;
        }
    </style>

image.png

如果.child-1改用align-items:center;则会达到预期的效果

image.png

image.png

align-content属性只适用于多行的flex容器，并且当交叉轴上有多余空间使flex容器内的flex线对齐。