当下你会选择 flex 还是 grid 作为首选?

2024-08-10 16:57:09 +08:00
 lrvinye

日常开发中使用 TailwindCSS 的情况下,总是会优先选择使用 flex 布局,可能是因为写起来语义比较直观?

最近看了很多关于 grid 布局方式的推荐,感觉 grid 还是很强大,

但是实际写起来总是不能很好的把想要实现的布局用 grid 相关属性串起来,

大家有这样的感觉吗?

2229 次点击
所在节点    前端开发
11 条回复
estk
2024-08-10 17:01:13 +08:00
flex 一维,grid 二维,看使用场景。自适应网页经常要用到 grid
nagisaushio
2024-08-10 17:44:29 +08:00
flex 是子元素的大小决定整体布局
grid 是整体布局决定子元素的大小

二者还是不太一样的
qcbf111
2024-08-10 18:29:29 +08:00
任何前端/客户端, width/height 写的越多的布局越差.
WhateverYouLike
2024-08-10 20:10:26 +08:00
再等 3 ~ 5 年,希望所有人在整体排版上完全使用 grid ,在组件中使用 subgrid ,在行中使用 flex 。

使用 grid 最好的状况是设计师也有基于网格布局的响应式设计能力,设计和技术共用同一套设计语言的优点巨大。

针对不会用的问题,作为技术,你可以先尝试完全用 grid 实现几套杂志、新闻类的网站(比如卫报)来练手。推荐 udemy 上的这个课程《 Advanced CSS and Sass: Flexbox, Grid, Animations and More!》的第二大节 grid ,不知道这么多年了课程内容变没变。
Bingchunmoli
2024-08-10 21:46:56 +08:00
@WhateverYouLike 是这样的,我不会 grid 所以习惯 flex , 现在写前端就更少了,毕竟也就最开始找工作的时候。前后端全干
wu67
2024-08-10 22:06:18 +08:00
flex 简单粗暴. 尤其是需要稍微兼容一下老设备的场景.
再过个 5 年到 10 年应该就随便了, 大部分搭载 win7 的机器应该都坏得差不多了.

别的不说, 前阵子还有个在用 17 年买的安卓机的喷我, ‘你手机换得勤不代表别人换机也勤’.....
Felldeadbird
2024-08-10 22:07:52 +08:00
我一直是 flex 。grid 去看了一下,还没怎么用。

flex 让我耗费时间就是要处理 子元素的大小 的占用比例问题。因为要做 PC 和移动端自适应,所以耗时比较久。
lrvinye
2024-08-10 22:19:55 +08:00
@WhateverYouLike 确实,感觉是自己还不太熟悉 grid 布局的方式。
lrvinye
2024-08-10 22:21:30 +08:00
@qcbf111 就是说还是要根据子元素内容的大小来决定实际的宽高比较好吗?这样听起来 flex 比较优先。
NotAfraidLP
2024-08-10 23:18:21 +08:00
我觉得是因为 flex 更简单...
不过 tailwind grid 封装得很易用了 比自己写原生 css gird 好上手多了
sugarsalt
2024-08-11 06:48:44 +08:00
@Felldeadbird 个人感觉 grid 处理子元素比例比 flex 方便得多,有种 word 里用透明边框的表格来排版的美

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1064010

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX