最近发现很多小伙伴在 CSS 布局方面遇到一些困惑，特别是关于弹性布局 和网格布局 中的属性。其中， justify-content 和 justify-items 是两个非常重要的属性，但很多人却不知道它们到底有什么区别，什么时候应该使用。别担心，这篇文章就来为你详细解答！我们会用通俗易懂的语言，结合实际例子，让你轻松掌握这两个属性的使用技巧。

一、什么是 Flexbox 和 Grid？

Flexbox

我们都经历过... Flexbox 是一种用于创建高度灵活的容器和子元素模型的 CSS 技术。它允许你轻松地控制元素的排列方式、对齐方式、以及内容分布。Flexbox 主要适用于单行或多行的排列。

Grid

Grid 是另一个强大的 CSS 技术，用于创建二维的网格系统。它允许你将页面划分为行和列，然后将元素放置在这些网格单元中。Grid 非常适合用于创建复杂的页面结构和布局，蚌埠住了...。

二、justify-content：主轴对齐大师

作用

太水了。 justify-content 是 Flexbox 和 Grid 中最常用的属性之一。它的作用是定义容器内所有项目沿着主轴方向的对齐方式。

主要值

• flex-start: 项目沿主轴起始位置对齐。
• flex-end: 项目沿主轴结束位置对齐。
• center: 项目沿主轴居中对齐。
• space-娱乐ween: 项目之间均匀分布， 第一个项目与容器左边缘对齐，再说说一个项目与容器右边缘对齐。
• space-around: 项目之间均匀分布，每个项目周围留有相同间距。

示例

   
项目1
 
项目2
 
项目3
 

三、justify-items：单元格内部对齐小能手

justify-items 是 Grid 中专门用于控制每个单元格内部项目的对齐方式的属性。它决定了在每个网格单元内如何水平或垂直排列内容，绝绝子...。

• `stretch`: 项目会拉伸到单元格的高度/宽度 。
• `start`: 项目沿单元格起始位置水平/垂直对齐
• `end`: 项目沿单元格结束位置水平/垂直对齐
• `center`: 项目沿单元格中心水平/垂直对齐
• `baseline`: 项目沿基线水平/垂直对齐。

四、justify_content 与 justify_items 的区别与联系

核心区别

• 适用范围 justify_content 用于 Flexbox 或 Grid **容器**；而 justify_items 只适用于 Grid **单元格** 。
• 作用对象 justify_content 控制整个容器内项目的整体排列；而 `justify_items` 控制每个单个单元格内的内容排列 。

共同点

• 两者都用于控制元素在主轴方向上的排列方式 。

五、何时使用哪一个？

• 当你的页面采用 Flexbox 进行布局时 ，你应该使用 `justify_content` 来控制整个 Flex container 内项目的整体排列 。

Grid场景

• 当你的页面采用 Grid 进行布局时 ，你应该使用 `justify_items` 来控制每个 grid cell 内的项目排列 。 注意 ， `justify_items` 在 grid 中才有效 ， 在 flex 中无效 。

六、可以一起使用吗？

结论

是的 ，你可以一边使用 `justify_content` 和 `justify_items` 。但是 ，这只能在 **Grid 布局** 中生效 。 如果你在 Flexbox 中使用了它们 ，将会没有任何效果 。

---