1. justify-contentjustify-content元素在主轴的对齐方式它有五个属性值.container { justify-content: flex-start | flex-end | center | space-between | space-around; }这里以水平方向为主轴进行举例即flex-direction: row。1justify-content : flex-start默认值元素在主轴上左对齐上对齐2justify-content : flex-end元素在主轴上右对齐下对齐3justify-content : center元素在主轴上居中对齐4justify-content : space-between元素在主轴上两端对齐元素之间间隔相等5justify-content : space-around每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍。2. align-itemsalign-item元素在交叉轴上的对齐方式它有五个属性值.container { align-items: flex-start | flex-end | center | baseline | stretch; }这里以水平方向为主轴进行举例即flex-direction: row。1align-itemflex-start交叉轴的起点对齐上面或左边。设置容器高度为 100px项目高度分别为 20px、40px、60px、80px、100px效果如图所示2align-itemflex-end交叉轴的终点对齐下面或右边。设置容器高度为 100px项目高度分别为 20px、40px、60px、80px、100px效果如图所示3align-itemcenter交叉轴的中点对齐。设置容器高度为 100px项目高度分别为 20px、40px、60px、80px、100px效果如图所示4align-itemstretch默认值、如果元素未设置高度或设为auto将占满整个容器的高度。假设容器高度设置为 100px而项目没有设置高度则项目的高度也为 100px5align-itembaseline以元素的第一行文字的基线对齐3. align-contentalign-content多根轴线对齐方式。如果元素只有一根轴线该属性不起作用。它有六个属性值.container { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }那这个轴线数怎么确定呢实际上这主要是由flex-wrap属性决定的当flex-wrap设置为nowrap时容器仅存在一根轴线因为项目不会换行就不会产生多条轴线。当flex-wrap设置为wrap时容器可能会出现多条轴线这时就需要去设置多条轴线之间的对齐方式。这里以水平方向为主轴时举例即flex-direction: row; flex-wrap: wrap;1align-content: stretch默认值轴线占满整个交叉轴。这里我们先设置每个项目都是固定宽度效果如下下面就去掉每个项目的高度它会占满整个交叉轴效果如下2align-content: flex-start从交叉轴开始位置填充3align-content: flex-end从交叉轴结尾位置填充4align-content: center与交叉轴中点对齐5align-content: space-between与交叉轴两端对齐轴线之前的间隔平均分布6align-content: space-around每根轴线两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍