Flex布局中的align-content和align-items有什么区别?

3 min read

align-items 属性用于将子元素在交叉轴(垂直于主轴)上对齐。而 align-content 属性用于控制多行元素的对齐方式。如果子元素只有一行,则 align-content 属性不起作用。

具体来说,当使用 align-items 时,子元素只有一行时,会将子元素相对于父元素的交叉轴对齐。而使用 align-content 时,子元素有多行时,会控制行与行之间的间隔和对齐方式,其中对齐方式包括:上对齐、下对齐、居中对齐、空间平分对齐等。

总的来说, align-items 只是控制子元素在单独一行上的对齐方式,而 align-content 控制多行子元素的对齐方式和行间距。