align-content

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

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

对齐项目

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

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

在容器中，对齐项目将以水平和垂直的单行文本为中心，而对齐内容将表现为有多行文本或一个段落，并且从顶部对齐甚至单行文本，就像它是一个具有文本对齐:中心规则的段落一样。

这是我们得到的结果

align-content:center;

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

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

(如果弯曲方向为列)

align-content

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

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

对齐项目

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

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

我从每个回答和访问博客中学到的是

横轴和主轴是什么

主轴为水平行，横轴为垂直列-为弯曲方向:行 主轴为垂直列，横轴为水平行-为弯曲方向:列

现在是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中玩几乎所有的东西。