迟迟没学会grid,是因为你没理解flex
我先问 2 个问题:
1. 你是不是用主轴-交叉轴/辅轴/副轴的概念理解 flex
2. 你是不是也用这个概念去理解 grid
如果你是用这种方式理解的 flex
,那听我慢慢道来
今天我打破你对 flex
的理解
打碎对 flex 理解
display: grid
和 display: flex
默认方向都是 row
,为什么他们表现出来的形式不一样呢?
display: flex
: 效果
display: grid
: 效果
这也是很多人在熟练使用 flex
之后,转用 grid
后遇到的最大问题(其实说的就是我自己,手动狗头)。
对于 flex
布局来说,使用最多的属性是 justify-content
和 align-items
。
justify-content
控制着主轴方向的布局,align-items
控制交叉轴(也叫侧轴,还有说叫做辅轴?副轴?)方向的布局。
对于 justify-content
控制的方向叫做主轴方向,大家都比较统一,对于 align-items
控制的方向叫什么,大家对它的理解就不太一样了,MDN 中叫做交叉轴或者侧轴,阮一峰和张鑫旭的博文中使用的是交叉轴,至于辅轴或副轴的翻译更多存在于和我一样的前端开发者写的博文中。下文对于 align-items
统一使用交叉轴的翻译。
我不知道其他人是不是和我理解的一样,我当时刚接触 flex
,理解了主轴之后,剩下的那个自然就是副轴,或者辅轴喽。
毕竟交叉轴或者侧轴这样的翻译实在不好理解,而主 - 副/辅从字面上一下就能理解了,然后就学会了 flex
布局方案,一直愉快使用到现在。
如果只使用 flex
布局,这样理解没啥问题。直到有一天,你去使用 grid
布局,你会发现,为什么都有 justify-content
、align-items
,但表现出来的效果完全不一样?然后吐槽一句:grid
布局真难用,一样的属性却是不同的用途。
现在 grid
布局迟迟没有流行,一方面说是兼容性问题,但时间已经到了 2022 年,主流浏览器大部分都已经支持了。所以就像张鑫旭大佬在两年前说的:“强虽然强,但是学起来累啊,我并不看好日后的普及。”
为什么 grid
布局学起来累,用 flex
的概念去理解 grid
,学起来肯定累啊,flex
的概念是什么,就是上面说的:主轴-交叉轴
grid
是网格布局,也就没有这概念,特别是还使用辅轴和副轴来理解的开发者,用 grid
简直是噩梦。
建立正确的理解方式,适用于 flex 和 grid
要理解 grid
, 首先就要抛弃对 flex
的理解,也就是说不要在使用主轴-交叉轴的概念(貌似有点逆天下之大不违),先听我慢慢说。
对于 flex
来说,控制方向的属性是 flex-direction
,默认是 row
。
通过控制台可以看到,flex
是将页面垂直分成了 3 列,水平是 1 行。
对于 grid
布局来说,控制方向的属性是 grid-auto-flow
,默认是 row
。
通过控制台看到,grid
是将页面水平分成了 3 行,垂直分成了 1 列。
要讲清楚这个问题,先回到 items
和 content
上面。
items 和 content 的意思
有没有想过为什么 item
加了 s
,content
没有加 s
?
从字面翻译就是项和内容的意思,也就是说 item
代表着行和列,多个行列就组成了网格,content
是每个网格中的内容。
所以 items
就代表着多个网格。
也就是说:
- align-items
和 justify-items
控制的是网格排列方式
- align-content
和 justify-content
控制的是网格中的内容排列方式。
正确理解 flex 和 grid 的方式
为什么 flex
布局用 align-items
和 justify-content
,不用 justify-items
。
重点来了:
- 用
flex
布局的那个div
(容器),把它看成一个网格 - 也就是说,
flex
内部的直接子元素都是content
- 用
grid
布局的那个div
(容器),把它看成多个网格,具体是几个网格,要看grid-template-columns
和grid-template-rows
的值。 - 也就是说,
grid
内部的直接子元素都是item
所以你现在能理解 flex
布局,为什么用 justify-content
而不是用 justify-items
了吗?
因为 flex
布局靠 align-items
就能控制这一个网格的排列方式了,justify-content
用来控制网格中的内容就行了。
其实从 items
和 content
的取值就能看出来了他们的区别了
- items
取值:start/center/end
等
- content
取值:space-between/space-around
等
flex-direction 和 grid-auto-flow 理解
从这两个取值来看:row
和 column
,很容易把它们理解成布局方向。
实际上要在布局方向上加上一个主语,也就是 xx 的布局方向
flex-direction
控制的是content
排列方式row
:content
水平排列column
:content
垂直排列grid-auto-flow
控制的是item
的排列方式row
:item
先行后列column
:item
先列后行
纠错
有一种关于 flex
和 grid
使用场景的解释:
- flex
:做二维布局
- grid
:做三维布局
不知道是谁提出了这种观点,这个观点简直害人!!
首先什么是三维?
三维是立体吧?
grid
布局有涉及到立体吗?
没有吧?
那能叫做三维布局吗?
当有个概念无法用中文词语表达准确时,首先不能用错误的词语去表达吧!
最后
我就是受主轴-辅轴影响,迟迟没有学会 grid
布局。
这种理解方式确实帮助了初学者理解 flex
布局工作的原理,flex
的流行它功不可没。
但我们也得看到这种思想背后存在的问题,导致理解 grid
成本太高。
以上纯属我个人瞎歪歪,没有资料可以证明(因为我英语不好,要在一堆英文资料中找到能支撑我观点的证据,对我来说太难了),如有讲的不对,欢迎指出。
- 《图解 Google V8》事件循环和垃圾回收——学习笔记(三)
- 迟迟没学会grid,是因为你没理解flex
- 为什么补码可以将减法变成加法运算
- 阿里云开源业内首个应用多活项目 AppActive,与社区共建云原生容灾标准
- 云原生下的指标与日志采集
- 开发者故事|朝九晚六大小周,我就是快乐的技术人
- 「Spark从精通到重新入门(二)」Spark中不可不知的动态资源分配
- 「Spark从精通到重新入门(一)」Spark 中不可不知的动态优化
- 阿里云上云第一课,助力 HTML入门
- 1分钟体验代码自动捉虫,Cherry键盘、积木星球抱回家
- 7-ELEVEn 便利店 EDI 概览
- mPaaS 月度小报|为采购而生,全新资源包上架;前端 2D 游戏化互动入门指南
- 生态和场景一站式集成?来看看小程序的“共享主义”
- 超视频化到来,你能看见什么?
- CodeDay 北京站报名倒计时
- CodeDay#7 启动 | 北京欢迎你
- 未来,让我们一起想象 — “Imagine” 阿里云视频云全景创新峰会
- 消息中间件:为什么我们选择 RocketMQ
- ucc编译器(优化)
- ucc编译器(汇编生成)