CSS flex布局之 align-content 属性
align-content 设置在容器上。属性定义了多根轴线的对齐方式。当项目只有一根轴线时,属性不起作用。
div{
display: flex;
align-content: center;
}
它可能的值有:
- stretch(默认):轴线占满整个交叉轴。
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。轴线之间的间隔比轴线与边框的间隔大一倍。
JavaScript 语法:
object.style.alignContent="space-between"