CSS 对齐内容与对齐项目之间的区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35049262/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between justify-content vs align-items?
提问by Ben Casalino
I'm having a really hard time understanding what's the difference? From my research it seems like justify-contentcan do... space-betweenand space-around, while align-itemscan do... stretch, baseline, initialand inherit?
我真的很难理解有什么区别？从我的研究好像justify-content可以做......space-between和space-around，而align-items能做到...... stretch，baseline，initial和inherit？
Also looks like both properties share, flex-start, flex-endand center.
看起来这两个属性都共享flex-start、flex-end和center。
Is there and dis/advantages to using one over the other or is it just preference? I feel like they are way to similar to just do the same thing anyone know the difference? thanks!!
使用一个而不是另一个有缺点/优势还是只是偏好？我觉得他们很相似，只是做同样的事情有人知道区别吗？谢谢！！
回答by Robot
Note:
笔记：
The Xand Yaxis / alignment direction can change depending if you are using flex-direction:rowor column
的X和ÿ轴/取向方向如果正在使用的变化取决于flex-direction:行或列
1. justify-content:Horizontal
1.justify-content:横向
Alignment & Spacing along primaryaxis (X-axis)
对准和间距沿主轴线（X轴）
flex-start;Align children horizontallyleft
flex-start;将孩子水平左对齐
flex-end;Align children horizontallyright
flex-end;将孩子水平向右对齐
center;Align children horizontallycentered (amaze!)
center;将孩子水平居中对齐（惊奇！）
space-between;Distribute children horizontallyevenly across entire width
space-between;将孩子水平均匀地分布在整个宽度上
space-around;Distribute children horizontallyevenly across entire width (but with space on the edges
space-around;将孩子水平均匀地分布在整个宽度上（但边缘有空间）
2. align-items:Vertical
2.align-items:垂直
Alignment only along secondaryaxis (Y-axis)
仅沿辅助轴（Y 轴）对齐
flex-start;Align children verticallytop
flex-start;将孩子垂直顶部对齐
flex-end;Align children verticallybottom
flex-end;将孩子垂直对齐底部
center;Align children verticallycentered (amaze!)
center;将孩子垂直居中对齐（惊奇！）
baseline;Aligned children verticallyso their baselines align (doesn't really work)
baseline;垂直对齐子项，使他们的基线对齐（实际上不起作用）
stretch;Force children to be height of container (great for columns)
stretch;强制孩子成为容器的高度（非常适合列）
See it in action:
看看它在行动：
http://codepen.io/enxaneta/full/adLPwv/
http://codepen.io/enxaneta/full/adLPwv/
In my opinion:
在我看来：
These should have been named:
这些应该被命名为：
flex-x:left or right or center or stretch or space-between or space-around
flex-x:向左或向右或居中或伸展或间隔或环绕
flex-y:left or right or center or stretch
flex-y:向左或向右或居中或伸展
But with html, you can never have nice things. Never.
但是使用 html，你永远不会有好东西。绝不。
