justify-content 与 align-items 之间的区别？ [复制]

Question

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

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

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

Answer 1

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

1. justify-content: 沿主轴

（如果 flex-direction 是行，则设置水平对齐/间距；如果 flex-direction 是列，则设置垂直对齐/间距）

例如，如果 flex-direction 是 row（默认）：

flex-start; 对齐子元素水平左

flex-end; 对齐孩子水平右

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

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

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

2. align-items: 沿次轴

（如果 flex-direction 是行，则设置垂直对齐；如果 flex-direction 是列，则设置水平对齐）

例如，如果 flex-direction 是 row（默认）：

flex-start; 对齐子元素垂直顶部

flex-end; 对齐子元素垂直底部

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

baseline;子元素垂直对齐，因此它们的基线对齐（实际上不起作用）

stretch; 强制子元素是容器的高度（非常适合列）

实际操作：

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

在我看来：

这些应该被命名为：

flex-x: 主轴对齐/间距

flex-y: 在辅助轴上对齐

但是对于 HTML，您永远无法拥有美好的东西。从不。