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


当前回答

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

其他回答

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

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

这是我们得到的结果

align-content:center;

align-content

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

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

对齐项目

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

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

来自flexboxfroggy.com的例子:

这将花费你10-20分钟,在21级你会找到你的问题的答案。

Align-content决定行与行之间的间距 Align-items决定在容器中如何将项目作为一个整体进行对齐。 当只有一行时,align-content没有作用

Align-items将子元素垂直分布,子元素之间有空格。

Align-content将它们捆绑在一起,就像它们是一个元素一样。

(如果弯曲方向为列)