前言

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

justify-content

CSSjustify-content特点界说浏览器如何沿着弹性容器的主轴和网格容器的行向轴分配内容元素之间和周围的空间。

核心在于 「 容器、主轴 」

就以官网上的比如来说

css 中的 justify-*

容器运用 grid 布局，当 justify-content = center 时,能够看到一切的内容元素在主轴的中心部分

css 中的 justify-*

当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布局 上有用 ！！！

css 中的 justify-*

当 justify-items = stretch 时,能够看到里边的元素占满了对应栅格区域的一切空间

css 中的 justify-*

当 justify-items = center 时,能够看到里边的元素处于了对应栅格区域的中心

css 中的 justify-*

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

justify-items 是决议了一切子元素与其对应栅格区域的方位联系

justify-self

CSSjustify-self特点设置单个盒子在其布局容器恰当轴中的对其方法。

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

css 中的 justify-*

css 中的 justify-*

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

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

总结

  • justify-content 对 flex布局 和 grid布局 能够起作用，决议元素与容器之间可用空间的方位联系
  • justify-items 只要对 grid布局 有用，决议一切元素与对应栅格区域的方位联系
  • justfy-self 只要对 grid布局 有用，决议单个元素与对应栅格区域的方位联系