CSS中的 align-content 属性用于设置多行 flexbox 或者 grid 中的对齐方式。它支持以下几种对齐方式:
- flex-start(开始位置对齐): 将多行排列的元素集中在容器的起始位置对齐。
- flex-end(结束位置对齐): 将多行排列的元素集中在容器的结束位置对齐。
- center(居中对齐): 将多行排列的元素集中在容器的纵向中心位置对齐。
- space-between(间隔对齐): 在多行排列的元素之间添加均等的空白,使其填满整个容器。
- space-around(周围对齐): 在多行排列的元素之间添加均等的空白,并在容器的开头和结尾也各添加一半的空白。
- stretch(拉伸对齐): 在多行排列的元素之间平均分配剩余空间,从而拉伸这些元素的高度。
需要注意的是,以上对齐方式只适用于具有多个 flex 行或 grid 行的容器,并且 align-content 属性必须与 display: flex 或者 display: grid 一起使用。同时,align-content 属性不会影响单行排列元素的对齐方式,单行排列元素的对齐方式需要使用 align-items 属性。
2023-05-24 21:07:02 更新