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

48 天前
 lrvinye

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

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

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

大家有这样的感觉吗?

1631 次点击
所在节点    前端开发
11 条回复
estk
48 天前
flex 一维,grid 二维,看使用场景。自适应网页经常要用到 grid
nagisaushio
48 天前
flex 是子元素的大小决定整体布局
grid 是整体布局决定子元素的大小

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

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

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

别的不说, 前阵子还有个在用 17 年买的安卓机的喷我, ‘你手机换得勤不代表别人换机也勤’.....
Felldeadbird
48 天前
我一直是 flex 。grid 去看了一下,还没怎么用。

flex 让我耗费时间就是要处理 子元素的大小 的占用比例问题。因为要做 PC 和移动端自适应,所以耗时比较久。
lrvinye
48 天前
@WhateverYouLike 确实,感觉是自己还不太熟悉 grid 布局的方式。
lrvinye
48 天前
@qcbf111 就是说还是要根据子元素内容的大小来决定实际的宽高比较好吗?这样听起来 flex 比较优先。
NotAfraidLP
48 天前
我觉得是因为 flex 更简单...
不过 tailwind grid 封装得很易用了 比自己写原生 css gird 好上手多了
sugarsalt
48 天前
@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