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:水平

对准和间距沿主轴线(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,你永远不可能拥有美好的东西.决不.