align-items和align-content之间的区别是什么?
当前回答
根据我在这里的理解:
当您使用align-item或justify-item时,您正在分别沿列轴或行轴调整网格项中的内容。
但是: 如果使用align-content或justify-content,则是沿着列轴或行轴设置网格的位置。当你在一个更大的容器中有一个网格,宽度或高度是固定的(使用px)时,就会发生这种情况。
其他回答
第一部分
对齐项目只适用于单行的盒子。假设容器内的一行中有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
根据我在这里的理解:
当您使用align-item或justify-item时,您正在分别沿列轴或行轴调整网格项中的内容。
但是: 如果使用align-content或justify-content,则是沿着列轴或行轴设置网格的位置。当你在一个更大的容器中有一个网格,宽度或高度是固定的(使用px)时,就会发生这种情况。
来自flexboxfroggy.com的例子:
这将花费你10-20分钟,在21级你会找到你的问题的答案。
Align-content决定行与行之间的间距 Align-items决定在容器中如何将项目作为一个整体进行对齐。 当只有一行时,align-content没有作用
主要的区别是元素的高度不一样! 然后你可以看到在一行中,它们都是中心\结束\开始
Align-items将子元素垂直分布,子元素之间有空格。
Align-content将它们捆绑在一起,就像它们是一个元素一样。
(如果弯曲方向为列)