为什么 CSS flex 布局中没有 `justify-items` 和 `justify-self`?

为什么 CSS flex 布局中没有 justify-itemsjustify-self

为什么在 CSS flex 布局中存在 align-itemsalign-self,却没有 justify-itemsjustify-self 呢?要解答这个问题,首先需要理解主轴(main axis)和交叉轴(cross axis)之间的差异。

1. 主轴和交叉轴的区别

在没有折行的情况下,一个 flex 容器(flex container)只有一个主轴,但却有 n 个交叉轴(n 代表 flex item的数量)。每个 flex item 都拥有自己独立的交叉轴。

一个 flex item 在主轴上的位置会影响其他 flex item,因为它们共享相同的主轴,而交叉轴却不会引发这种相互影响。

2. CSS 属性的命名规则

2.1 align-*justify-*

在 CSS flex 布局中,属性名称中的 align-* 表示这是应用于主轴上的规则,而 justify-* 表示这是应用于交叉轴上的规则。

2.2 *-items*-content*-self

*-self 表示每个 flex item 都拥有独立的轴,它们在轴上的位置不会影响其他 flex item。我们可以针对单个 item 设置它的位置。

*-items*-self 在本质上相似,只不过前者是批量设置,而后者是针对单个 item 的设置。可以看作是一个语法糖。

*-content 表示多个 flex item 共享一个轴,一个 flex item 在轴上的位置会影响其他 flex item。

3. 总结

因此,在 flex 布局中,我们不能使用 justify-items,因为多个元素共享一个轴,它们属于同一组,这会导致相互干扰。想象一下:假如我们指定了justify-items: flex-end,最终只会有一个元素抢到这个位置。

同样的道理,我们也不能使用 justify-self,因为各元素之间可能会竞争位置导致冲突。但是,我们可以采用其他解决方案,例如使用 order 属性来对它们进行更为精细的排序(和flex-startflex-endcenter 相比)。

相关推荐
fruge4 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
znhy@1235 小时前
CSS易忘属性
前端·css
软件技术NINI6 小时前
html css js网页制作成品——HTML+CSS仙台有树电视剧网页设计(5页)附源码
javascript·css·html
小肚肚肚肚肚哦8 小时前
CSS 伪类函数 :where 简介
前端·css
小肚肚肚肚肚哦8 小时前
伪元素与普通元素的层级关系问题浅析
前端·css
~无忧花开~10 小时前
CSS学习笔记(二):CSS动画核心属性全解析
开发语言·前端·css·笔记·学习·css3·动画
小九今天不码代码10 小时前
深入理解 CSS 表格布局:table-layout 的秘密与实战详解(附费用报销单案例)
css·前端开发·表格布局·web设计·table-layout·页面优化·样式布局
trsoliu17 小时前
Tailwind CSS 类名管理工具实战指南
前端·css
汤姆Tom17 小时前
CSS 预处理器深入应用:提升开发效率的利器
前端·css·面试
小张成长计划..17 小时前
前端7:综合案例--品优购项目(HTML+CSS)
前端·css·html