问justify-content和align-items之间的区别？

EN

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

1.沿主轴的justify-content:

(如果调整方向为行，则设置水平对齐/间距；如果调整方向为列，则设置垂直对齐/间距)

例如，如果flex-direction为row (默认)：

flex-start;水平向左对齐子对象

flex-end;将子项水平右对齐

center;水平居中对齐子对象(令人惊叹！)

space-between;在整个宽度上水平均匀地分布子对象

space-around;在整个宽度上水平均匀地分布子对象(但在边缘留出空间

2.沿第二轴的align-items:

(如果flex方向为行，则设置垂直对齐；如果flex方向为列，则设置水平对齐)

例如，如果flex-direction为row (默认)：

flex-start;将子项垂直上对齐

flex-end;将子项垂直底部对齐

center;将子项垂直居中对齐(神奇！)

baseline;垂直对齐子对象，使它们的基线对齐(实际上并不起作用)

stretch;强制子容器的高度(非常适合于列)

将其付诸实践：

http://codepen.io/enxaneta/full/adLPwv/

在我看来：

这些应该被命名为：

主轴上的flex-x:对齐/间距

flex-y:在次轴上的对齐

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