align-content 和 align-items 有什么区别？

Question

align-items 和 align-content 有什么区别？

原文由 Dinh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

flex-box 的 align-items 属性将 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 的外观：

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

这里有一些可以玩的codepen链接：

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

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

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

原文由 Asim K T 发布，翻译遵循 CC BY-SA 3.0 许可协议