align-content和align-item有什么区别？ [英] What's the difference between align-content and align-items?

问题描述

任何人都可以告诉我 align-items 和 align-content 之间的区别吗？我很困惑。感谢一堆！

解决方案

flex-框沿着交叉轴对齐flex容器内的项，就像沿着主轴的 justify-content 一样。 （对于默认的 flex-direction：row ，横轴对应于垂直，主轴对应于水平。 flex-direction：column 这两个是分别互换的。）

这里是如何 align-items：center 外观：

但 align-content 用于多行灵活框。当项目在单行中时，它不起作用。它根据其值来对齐整个结构。以下是 align-content：space-around; 的示例：

下面是 align-content：space-around; 与 align-items：center look：

注意第三个框和第一行中的所有其他框更改为垂直居中在该行。 p>

以下是一些代码链接：

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

< a href =http://codepen.io/asim-coder/pen/WrMNWR =nofollow noreferrer> http://codepen.io/asim-coder/pen/WrMNWR

这里是一个超酷的笔，显示和让你可以在flexbox中玩几乎所有的东西。

Can anybody show me the difference between align-items and align-content? I'm pretty confused. Thanks a bunch!

解决方案

The align-items property of flex-box aligns the items inside a flex container along the cross axis just like justify-content does along the main axis. (For the default flex-direction: row the cross axis corresponds to vertical and the main axis corresponds to horizontal. With flex-direction: column those two are interchanged respectively).

Here's an example of how align-items:center looks:

But align-content is for multi line flexible boxes. It has no effect when items are in a single line. It aligns the whole structure according to its value. Here's an example for align-content: space-around;:

And here's how align-content: space-around; with align-items:center looks:

Note the 3rd box and all other boxes in first line change to vertically centered in that line.

Here are some codepen links to play with:

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

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

Here's a super cool pen which shows and lets you play with almost everything in flexbox.

这篇关于align-content和align-item有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！