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布局 有效,决定单个元素与对应栅格区域的位置关系
相关推荐
tiantian_cool10 分钟前
Xcode 导入与使用 SVG 文件矢量图适配全流程
前端
小泥巴呀22 分钟前
手写一个简单的vue——响应系统1
前端·vue.js
ze_juejin25 分钟前
插件化和模块化的对比
前端
前端康师傅26 分钟前
网页为什么会白屏?
前端·http·面试
李剑一27 分钟前
Tauri2.0本地实现导入导出,有坑!
前端·vue.js
执行上下文28 分钟前
Element Plus Upload 添加支持拖拽排序~
前端·javascript·element
forever_Mamba28 分钟前
从重复到优雅:前端筛选逻辑的优化之旅
前端·javascript·性能优化
一个小浪吴呀28 分钟前
生死簿应用
前端
好好好明天会更好28 分钟前
vuedraggable-拖拽插件使用小计
前端
前端付豪30 分钟前
14、✅ 手写 Event Loop 模拟器(理解微任务 / 宏任务调度)
前端·javascript