语法:
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
- stretch: 默认值。轴线将占满整个交叉轴。
- flex-start: 轴线将与弹性容器的开头对齐。
- flex-end: 轴线将与弹性容器的结尾对齐。
- center: 轴线将位于弹性容器的中间。
- space-between: 轴线将平均分布在弹性容器中。轴线两侧没有间隔。
- space-around: 轴线将平均分布在弹性容器中,两侧有相等的间隔。
示例:
.container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
在上述示例中,.container 是一个弹性容器,通过 align-content: space-between; 设置多行轴线的分布方式为两侧平均分布,相邻轴线之间没有间隔。
请注意,align-content 主要用于控制多行情况下的轴线对齐方式。如果弹性容器只有一行(flex-wrap: nowrap;),align-items 属性更常用,用于控制单行的轴线在交叉轴上的对齐方式。
转载请注明出处:http://www.pingtaimeng.com/article/detail/5975/CSS