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


当前回答

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

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

(如果弯曲方向为列)

其他回答

来自flexboxfroggy.com的例子:

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

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

align-content

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

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

对齐项目

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

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

首先,align-items用于单行中的项目。因此,对于主轴上的单行元素,align-items会将这些元素各自对齐,并从下一行的新视角开始。

现在,align-content不会干扰一行中的项,而是会干扰行本身。因此,align-content将尝试根据彼此和flex容器对齐行。

检查这个小提琴:https://jsfiddle.net/htym5zkn/8/

第一部分

对齐项目只适用于单行的盒子。假设容器内的一行中有4个盒子。然后,align-items将应用于将这些框对齐到一行中。如果flex-direction是row(默认值),那么align-items将垂直排列框,如果它的column则水平排列框。

第二部分

继续上面的单行盒子,如果我们再增加一行4个盒子,现在有8个盒子,每行4个。这里align-content出现在画面中,如果我们对容器应用align-content,它将被应用到总共有8个盒子的两行。如果我们应用align-content:center,它将在容器中居中。在这种意义上,align-content用于排列多行灵活的盒子。

Align-items:居中,align-content: flex-start

flex-box的align-items属性将伸缩容器内的项目沿交叉轴对齐,就像justify-content沿主轴对齐一样。(对于默认的flex-direction: row,交叉轴对应于垂直,主轴对应于水平。对于flex-direction:列,这两个分别交换)。

下面是align-items:center的示例:

但align-content适用于多线柔性盒子。当项目在一行中时,它不起作用。它根据值调整整个结构。下面是一个align-content的例子:

这是align-content: space-around;使用align-items:center looks:

请注意,第一行中的第三个方框和所有其他方框都在该行中垂直居中。

下面是一些代码依赖的链接:

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

这是一支超级酷的笔,它可以显示并让你在flexbox中玩几乎所有的东西。