justify-content vs align-items之间的区别？

Question

我很难理解其中的差异是什么？从我的研究看来，justify-content似乎可以...... space-between和space-around，而align-items可以做... stretch，baseline ，initial和inherit？

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

使用其中一个是否存在优势？或者只是偏好？我觉得他们是相似的，只是做同样的事情，谁知道差异？谢谢！！

Answer 1

注意：

X 和 Y 轴/对齐方向可能会发生变化，具体取决于您使用的是flex-direction: 行还是<强>列 的

1。 justify-content:水平

对齐＆amp;沿主轴（X轴）

的间距

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

flex-end;将儿童水平对齐正确

center;将儿童水平对齐居中（惊奇！）

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

上

space-around;在整个宽度上均匀分布儿童水平（但边缘有空格

2。 align-items:垂直

仅沿辅助轴（Y轴）

对齐

flex-start;垂直对齐儿童 顶部

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

center;将儿童垂直对齐居中（惊奇！）

baseline;对齐的孩子垂直所以他们的基线对齐（实际上不起作用）

stretch;强迫孩子成为容器的高度（非常适合列）

在行动中看到它：

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

在我看来：

这些应该被命名为：

flex-x:左侧或右侧或中间或拉伸或间隔或空间

flex-y:向左或向右或居中或伸展

但是使用html，你永远不会有好东西。从不。