align-items和align-content之间的区别是什么?


当前回答

根据我在这里的理解:

当您使用align-item或justify-item时,您正在分别沿列轴或行轴调整网格项中的内容。

但是: 如果使用align-content或justify-content,则是沿着列轴或行轴设置网格的位置。当你在一个更大的容器中有一个网格,宽度或高度是固定的(使用px)时,就会发生这种情况。

其他回答

关键属性是弹性包装。当nowrap(或当十字轴上没有多余的空间)时,align-content没有作用。当换行或反向换行时,如果十字轴中有额外的空间,它总是会产生影响(不管行数如何)。

比较以下四个方框:

在容器中,对齐项目将以水平和垂直的单行文本为中心,而对齐内容将表现为有多行文本或一个段落,并且从顶部对齐甚至单行文本,就像它是一个具有文本对齐:中心规则的段落一样。

这是我们得到的结果

align-content:center;

主要的区别是元素的高度不一样! 然后你可以看到在一行中,它们都是中心\结束\开始

根据我在这里的理解:

当您使用align-item或justify-item时,您正在分别沿列轴或行轴调整网格项中的内容。

但是: 如果使用align-content或justify-content,则是沿着列轴或行轴设置网格的位置。当你在一个更大的容器中有一个网格,宽度或高度是固定的(使用px)时,就会发生这种情况。

align-content

Align-content控制多行之间的交叉轴(即,如果弯曲方向是行,则为垂直方向,如果弯曲方向是列,则为水平方向)定位。

(想象一段文字是垂直展开的,向上堆叠,向下堆叠。这是在一个弯曲方向的行范例下)。

对齐项目

Align-items控制单个伸缩元素行的交叉轴。

(试想一下,如果一个段落中包含一些普通文本和一些高难度的文本,比如数学公式,每一行是如何对齐的。在这种情况下,它将是底部,顶部,或中心的每一种类型的文本在一行将对齐?)