align-items和align-content之间的区别是什么?
当前回答
关键属性是弹性包装。当nowrap(或当十字轴上没有多余的空间)时,align-content没有作用。当换行或反向换行时,如果十字轴中有额外的空间,它总是会产生影响(不管行数如何)。
比较以下四个方框:
其他回答
我从每个回答和访问博客中学到的是
横轴和主轴是什么
主轴为水平行,横轴为垂直列-为弯曲方向:行 主轴为垂直列,横轴为水平行-为弯曲方向:列
现在是align-content和align-items
Align-content是针对行,如果容器有(多于一行) align-content的属性
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
Align-items用于行中的项目 对齐项的属性
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
如需更多参考,请访问flex
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中玩几乎所有的东西。
Align-items将子元素垂直分布,子元素之间有空格。
Align-content将它们捆绑在一起,就像它们是一个元素一样。
(如果弯曲方向为列)
第一部分
对齐项目只适用于单行的盒子。假设容器内的一行中有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)时,就会发生这种情况。