CSS-对齐内容与对齐项目之间的区别?

这个问题在这里已有答案:

  • 在CSS Flexbox中,为什么没有“ justify-items”和“ justify-self”属性?                                     4个答案

我很难理解有什么区别? 从我的研究看来,flex-start可以执行... flex-endcenter,而align-items可以执行... stretchbaselineinitialinherit

看起来两个属性也共享flex-startflex-endcenter

是否存在使用一个相对于另一个的优缺点,或者仅仅是偏爱? 我觉得他们可以相似地做同一件事,任何人都知道区别吗? 谢谢!!

Ben Casalino asked 2019-10-08T14:35:42Z
1个解决方案
131 votes

注意:

X和Y轴/对齐方向可以更改,具体取决于您使用的是flex-y:行还是列

1. flex-y:水平

沿主轴(X轴)对齐和间距

flex-y:将孩子水平向左对齐

flex-y:将孩子水平向右对齐

flex-y:将子项水平居中对齐(惊奇!)

flex-y:在整个宽度上水平均匀地分布子级

flex-y:在整个宽度上水平均匀地分布子级(但边缘留有空间)

2. flex-y:垂直

仅沿辅助轴(Y轴)对齐

flex-y:垂直对齐子项顶部

flex-y:将孩子垂直对齐

flex-y:将子项垂直居中对齐(惊奇!)

flex-y:垂直对齐了孩子,因此他们的基线对齐了(实际上没有用)

flex-y:强制子级达到容器的高度(列最大)

看到它的实际效果:

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

在我看来:

这些应该被命名为:

flex-y:左或右或中心或拉伸或之间或周围的空间

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

但是使用html,您永远不会拥有美好的事物。 决不。

FEA5T answered 2019-10-08T14:38:45Z
translate from https://stackoverflow.com:/questions/35049262/difference-between-justify-content-vs-align-items