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布局 有效,决定单个元素与对应栅格区域的位置关系
相关推荐
非凡ghost5 分钟前
PixPin截图工具(支持截长图截动图) 中文绿色版
前端·javascript·后端
૮・ﻌ・14 分钟前
Vue2(一):创建实例、插值表达式、Vue响应式特性、Vue指令、指令修饰符、计算属性
前端·javascript·vue.js
半生过往1 小时前
2025 前端动效实战指南:Vue Bits & React Bits 深度拆解(功能 / 复用 / 高频问题处理)
前端·vue.js·react.js
程序员包打听1 小时前
Vitest 4.0 重磅发布:Browser Mode 正式稳定,前端测试进入新纪元
前端
BumBle1 小时前
UniApp 多页面编译优化:编译时间从10分钟到1分钟
前端
星链引擎1 小时前
大语言模型的技术突破与稳定 API 生态的构建
前端
还是大剑师兰特1 小时前
TypeScript 面试题及详细答案 100题 (71-80)-- 模块与命名空间
前端·javascript·typescript
BumBle1 小时前
使用 SortableJS 实现vue3 + Element Plus 表格拖拽排序
前端·vue.js·element
玉宇夕落1 小时前
HTML5 音乐敲击乐静态界面
前端
海在掘金611271 小时前
告别"拼写错误":TS如何让你的代码"字字精准"
前端