css 中的 justify-*

前言

一直对 css 中的 justify-content、justify-items、justify-self 有一定的困惑，搞不清什么时候该用什么属性,今天认真看了 MDN， 做一个简单的总结

justify-content

CSS justify-content 属性定义浏览器如何沿着弹性容器的主轴和网格容器的行向轴分配内容元素之间和周围的空间。

核心在于 「 容器、主轴 」

就以官网上的例子来说

容器使用 grid 布局，当 justify-content = center 时,可以看到所有的内容元素在主轴的中间部分

当justify-content = space-between时，内容元素分布在主轴两侧

现在应该对justify-content 有一个清晰的认识了，他就是决定了在主轴方向上，内容元素在容器可用空间上的位置关系

justify-items

CSS 的 justify-items 属性为所有盒中的项目定义了默认的 justify-self ，可以使这些项目以默认方式沿适当轴线对齐到每个盒子。

该属性的作用效果取决于我们使用的布局模式：

1. 在块级布局中，会将其包含的项目在其行内轴上对齐；
2. 绝对定位的元素中，会将其包含的项目在其行内轴上对齐，同时考虑 top、left、bottom、right 的值；
3. 表格单元中，该属性被忽略（块级元素、绝对定位元素和表格布局中对齐的更多信息）；
4. 弹性盒子布局中，该属性被忽略（弹性盒子中对齐的更多信息）；
5. 栅格布局中，会将其栅格区域内的项目在其行内轴上对齐（栅格布局中对齐的更多信息 (en-US)）；

也就是说在 flex布局 上是不起作用的，只有在 grid布局 上有用 ！！！

也就是说在 flex布局 上是不起作用的，只有在 grid布局 上有用 ！！！

也就是说在 flex布局 上是不起作用的，只有在 grid布局 上有用 ！！！

当 justify-items = stretch 时,可以看到里面的元素占满了对应栅格区域的所有空间

当 justify-items = center 时,可以看到里面的元素处于了对应栅格区域的中间

同样的，start 是与栅格区域的开始位置进行了对齐

justify-items 是决定了所有子元素与其对应栅格区域的位置关系

justify-self

CSS justify-self 属性设置单个盒子在其布局容器适当轴中的对其方式。

justify-items 是对于所有内容元素有效，如果要想针对某个元素单独修改，那么就需要 justify-self

使用 justify-self = center 时，那么这个元素会处于栅格区域中间

理解了 justify-items,那么 justify-self 也是一样的

总结

• justify-content 对 flex布局 和 grid布局 可以起作用，决定元素与容器之间可用空间的位置关系
• justify-items 只有对 grid布局 有效，决定所有元素与对应栅格区域的位置关系
• justfy-self 只有对 grid布局 有效，决定单个元素与对应栅格区域的位置关系