justify-content和align-items有什么区别？

Question

我很难理解它们之间的区别。通过我的研究，似乎justify-content可以实现...space-between和space-around，而align-items可以实现...stretch、baseline、initial和inherit？

同时，这两个属性都共享flex-start、flex-end和center。

使用其中一个属性是否有优劣之分还是只是偏好？我觉得它们太相似了，不知道有何区别。谢谢！

- Ben Casalino

---

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - Paulie_D

一个在主轴上工作，另一个在交叉轴上工作。有关详细信息，请参见这里：https://dev59.com/tlwY5IYBdhLWcg3wgX6V - Michael Benjamin

不是的...justify-content 处理主轴上的元素，align-items 则处理交叉轴。 - Paulie_D

是的，这个问题应该被视为那个问题的重复。 - Paulie_D

@paulie_D 不是想要提出重复的问题，而是我很难理解轴部分，谢谢你的帮助！ - Ben Casalino

这绝对不是一个重复的问题。答案适用于两个问题，但每个问题都不同。 - Tony

Answer 1

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

1. justify-content: 沿着主要轴线对齐

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

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

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中，你永远都不可能有好东西。永远不可能。

- Robot

---

为什么他们不能就称之为垂直和水平对齐呢，哈哈。 - Daniel Kobe

很遗憾地，为了简化问题，justify-content 和 align-items 的效果会根据 flex-direction 的设置而改变。例如，如果 flex-direction 设置为 column，则 justify-content 影响垂直对齐，反之亦然。 - ericso

@ericso这是推卸责任，DanielKobe是正确的：他们本可以很容易地将其命名为flex-x，flex-y，甚至是flex-primary和flex-secondary，以表明轴可以改变。当前的名称荒谬、不一致且令人困惑，对于那些正在学习的人来说更是如此。它们没有表明它们彼此相关或与flexbox相关。像justify和align这样的词已经被其他css规则（如vertical-align等）污染。像content和items这样的词语也是不匹配的。我甚至再也无法忍受了。 - Robot

这个定义是不正确的。它与水平和垂直无关，而是关于主轴和交叉轴。justify-content作用于主轴，align-items作用于交叉轴。如果flex-direction是水平的，则这个答案是正确的。如果flex-direction是垂直的，则不正确。 - Undistraction

看到我顶部的备注了吗？这个解释使得一个不好的命名约定变得易于理解，同时也提及了你提到的主次轴的许多注意事项。 - Robot