justify-content 与 align-items 之间的区别？ [复制]

Posted 2023-03-06

【中文标题】justify-content 与 align-items 之间的区别？ [复制]

【英文标题】：Difference between justify-content vs align-items? [duplicate]

【发布时间】：2016-05-05 02:34:04

【问题描述】：

我很难理解有什么区别？根据我的研究，justify-content 似乎可以做到...space-between 和space-around，而align-items 可以做到...stretch、baseline、initial 和inherit？

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

使用其中一个有什么缺点/优点，还是只是偏好？我觉得他们很相似，只是做同样的事情有人知道区别吗？谢谢！！

【问题讨论】：

css-tricks.com/snippets/css/a-guide-to-flexbox

一个在主轴上工作，另一个在横轴上工作。详情见这里：***.com/q/32551291/3597276

不...justify-content 处理主轴上的元素，对齐交叉轴上的元素

是的..这应该是那个问题的傻瓜。

@paulie_D 不是想问傻问题，但它的轴部分我很难理解谢谢你的帮助！！

【参考方案1】：

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

1. justify-content: 沿主轴

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

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

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，您永远无法拥有美好的东西。从不。

【讨论】：

为什么不能叫它垂直和水平对齐哈哈

不幸的是，为了简化，justify-content 和 align-items 的效果会根据 flex-direction 而变化。例如。如果flex-direction 设置为column，justify-content 会影响垂直对齐，反之亦然。

@ericso 这是一个骗局，DanielKobe 是正确的：他们可以轻松地将其命名为 flex-x、flex-y，甚至 flex-primary、flex-secondary，以表明轴可以改变。当前的名称对于那些学习者来说是荒谬的、不一致的和令人困惑的。它们没有表明它们彼此相关，或者与 flexbox 相关。诸如 justify 和 align 之类的词已经被其他 css 规则（例如 vertical-align 等）污染了。诸如 content 和 items 之类的词是不匹配的。我什至不能了。

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

@pedr 看到我的注释了吗？这种解释使糟糕的命名约定变得平易近人，同时对您提到的主轴和次轴做了很多注释。