两者都设置了内容的对齐方式。

1. 沿 初选轴的 justify-content:

(如果弯曲方向为行，则设置水平对齐/间距; 如果弯曲方向为列，则设置垂直对齐/间距)

例如，如果 flex-direct 是 row (默认值) :

校准儿童 水平方向左侧

对齐儿童

校准儿童以 水平方向为中心的 (惊奇!)

将子代 水平方向均匀地分布在整个宽度上

将子代 水平方向均匀地分布在整个宽度上(但在边缘留有空间)

2. 沿 次要的轴的 align-items:

(如果伸缩方向为行，则设置垂直对齐; 如果伸缩方向为列，则设置水平对齐)

例如，如果 flex-direct 是 row (默认值) :

对齐儿童

校准儿童 垂直的底部

校准儿童以 垂直的为中心的 (惊奇!)

校准儿童 垂直的使他们的基线校准 (不是很管用)

强制子集装箱高度为 (很适合柱子)

看看它的实际效果:

Http://codepen.io/enxaneta/full/adlpwv/

在我看来:

这些应该被命名为:

flex-x:主轴对准/间距

flex-y:在次级轴上的对准

但是使用 HTML 你永远不会有好的东西，永远不会。