两端内容与对齐项之间的区别

Question

我很难理解有什么区别？从我的研究来看，似乎justify-content可以做到...... space-between和space-around，而align-items可以做到... stretch、baseline、initial和inherit？

看起来两个属性共享，flex-start，flex-end和center。

使用一个比另一个有缺点/优点，还是只是偏好？我觉得他们很相似，只是做同样的事情，有人知道区别吗？谢谢！！

Answer 1

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

1. 沿主轴justify-content:

（如果弹性方向为行，则设置水平对齐/间距，如果弹性方向为列，则设置垂直对齐/间距）

例如，如果弹性方向为行（默认）：

flex-start; 将子项水平左对齐

flex-end; 将子项水平对齐

center; 将孩子水平居中对齐（惊奇！

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

space-around; 在整个宽度上水平均匀分布子项（但边缘有空间）

2. 沿辅助轴align-items:

（如果弹性

方向为行，则设置垂直对齐方式，如果弹性方向为列，则设置水平对齐方式）

例如，如果弹性方向为行（默认）：

flex-start; 将子项垂直对齐顶部

flex-end; 将子项垂直向下对齐

center; 将孩子垂直居中对齐（惊奇！

baseline; 垂直对齐子项，使其基线对齐（实际上不起作用）

stretch; 强制子项为容器的高度（非常适合列）

See it in action：

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

在我看来：

这些应该被命名为：

主轴flex-x:对齐/间距

在辅助轴上flex-y:对齐

但是有了HTML，你永远不可能有好东西。 从不。