在 Justify-content:、align-items: 和 text-align [重复] 之间混淆

Question

呵呵，我是网络开发的新手。我很困惑在哪里使用 CSS 属性：Justify-content:, align-items: & text-align。我理解 flexbox 的概念，但有时它很混乱。有什么快速的方法或备忘单来找出要使用的 CSS 属性吗？

Answer 1

justify-content - 属性定义了浏览器如何沿着 flex 容器的主轴和网格容器的内联轴在内容项之间和周围分配空间。

align-items - 属性将所有直接子项作为一个组设置 align-self 值。在 Flexbox 中，它控制项目在 Cross Axis 上的对齐方式。

text-align - 属性设置块元素或表格单元框内内容的水平对齐方式。这意味着它像垂直对齐一样工作，但在水平方向上。

Answer 2

对齐内容：

简而言之，justify-content 对齐容器的内容（顾名思义）。例如，这可以是一个组件的一个或多个子组件。当您想要对齐其他容器（例如按钮、div、输入等）时，您应该这样做。

警告！正如@Aman Sharma 提到的justify-content

定义浏览器如何沿弹性容器的主轴在内容项之间和周围分配空间

这意味着如果您使用flex-direction: column，则主轴将为y 轴（因此 justify-content: center 实际上将垂直居中元素，而align-item: center 将完成水平对齐工作）。

（相反，如果您使用flex-direction: row 或者您没有指定方向，justify-content:center 将使内容水平居中）。

对齐项

此时您可能已经猜到，垂直对齐在某种程度上与justify-content 相似，但这只是部分正确。虽然align-items: center 完成了将容器的子项在交叉轴上居中的工作，但存在一些差异。最明显的一个是它们不共享所有属性（justify-content 具有 space-between、space-arround 等，而align-items 具有 baseline、self-start 等）。

为了更好地理解这一点（以及一般的 flexbox），恐怕没有捷径可走。但我建议您尝试找到一个您认为适合您的教程（视频或文本 - 并不重要），并尝试与它们一起玩。

文本对齐

text-align + vertical-align 和 justify-content + align-items 之间的主要区别之一是第一对仅适用于 块元素，而第二对仅适用于 弹性容器。

此外，您可以阅读 Aman 发布的定义：text-align 始终设置水平对齐方式（您不能切换块元素的内容方向）。

结论

如果您稍微玩一下这 3 个选项（使用容器），您应该能够发现 flex 和 block 显示之间的许多差异，以及 justify-content、align-items 和 text-align 之间的差异。

一个明显的问题是，当使用容器作为子容器（而不是文本）时，display: block 容器将要求子容器在流布局中具有inline 角色（因此display: inline、display: inline-block 之一, display: inline-flex 等），而对于 flex 容器（使用 justify-content: center），这不是强制性的。

为了举例，我只列出了一些最显着的差异，并试图给你一个提示，为什么没有简短的答案、快速方法或备忘单。但是还有其他重要的区别，所以我只能再次建议您搜索一些教程并在代码中使用它们。