css 中的 justify-*

前言

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

justify-content

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

核心在于 「 容器主轴

就以官网上的例子来说

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

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

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

justify-items

CSSjustify-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布局 有效,决定单个元素与对应栅格区域的位置关系
相关推荐
天蓝色的鱼鱼1 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙2 小时前
[译] Composition in CSS
前端·css
白水清风2 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix2 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278002 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端2 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧2 小时前
Promise 的使用
前端·javascript
NBtab2 小时前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端
天天扭码3 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试