登录  /  注册
首页 > web前端 > H5教程 > 正文

前端未来页面布局发展方向是 Flexbox 还是 Grid?

php中文网
发布: 2016-06-07 08:45:00
原创
1326人浏览过

Flexbox目前支持的浏览器要比Grid多,但是Flexbox&Grid flex的加载貌似有点问题,不知道未来的发展方向如何?
(另外求大神推荐几个不错的Flexbox和Grid布局的网站实例)

回复内容:

我觉得这两个不是非要二选一的。可能两个都会实现,然后在不同场景下选取更合适的那个。 技术只是会越来越先进,至于什么时候能支持,不是规范能决定的,应该是各大主流浏览器来决定,就拿flexbox来说,早期也仅是实验性的,但目测现在主流浏览器或多或少都支持。而现在的grid就类似于当初的flexbox一样。至于布局,要做到杂志那样的排版还是离不开shape这样的。

另外一个就是案例,flexbox的案例在手机上常能看到了,而Grid现在还没有实际项目使用吧(我还没有看到过)。有关于这两方面的资料,也收集过一些,感 兴趣的可以看看:

1、flexbox:flexbox | 博客自由标签
2、Grid:css3 grid layout 泻药,没研究过。
不知道。

只好纯扯扯蛋:

从规范编辑者角度来入手
CSS Flexible Box Layout Module Level 1
历任编辑 Microsoft 、Opera、Mozilla、Google 的人都有。

CSS Grid Layout Module Level 1
历任编辑 Microsoft、Mozilla、Google
其中微软的人参与的比较多。

再看浏览器支持:
Grid: Can I use... Support tables for HTML5, CSS3, etc
Flexible Box:Can I use... Support tables for HTML5, CSS3, etc

Grid 基本上就IE10以后版本支持,可见跟规范历任编辑所属公司参与程度有关系,隐约指向这货是微软"喜爱"的东东么。
好在有 Google 的人说不好未来什么时候 webkit 系的支持了也不好说。

Flexible Box 就不同了,基本上是全民(厂商)参与的节奏么,支持性也好的多。

所以吧,也就只能说 Flex 是现在时,Grid 或许是个将来时,以后的事儿谁知道呢。

然后你说的 Flex 加载有问题是,偶没看懂。
是指它在有其它列进来时候缩小重现布局了一下么?

不知道它这个演示怎么写的样式,所以仍然是不知道啊不知道。

如果非要扯点啥凑字数的话……那么偶觉得挺正常啊,弹性盒么。
没东西(没有可计算的宽度)在旁边的时候总要“弹一弹”的 = =||| 左右有可算出实际宽度的容器来了,自己只好就被挤扁扁了。
要不是这样,不成固定盒了。

而 Grid 看规范示例内意思是划分网格,猜它这个固定列宽了,所以,总体有多少列宽度是多少布局引擎开始就计算完成。然后就刷刷的填内容,不再需要重算布局位置了。 国内的技术比国外慢一拍,所以肯定是先成熟的技术就流行起来了,我们不是还在用float吗 我来正面回答这个问题:发展方向必然是Flexbox胜过grid

原因是:
grid可以实现的大多数场景下Flexbox都能胜任,而flexbox能实现的用grid就很难了。
所以grid不会消失,但只能在相对小众的需求上发展,而更多的应用会使用flexbox方式。

布局实例就不找了,自己搜索分析比别人推荐的效果要好得多。 如果是移动端,我觉得grid很给力,一直想用,如果是PC端,玩玩还行,做项目还差好几年呢,你知道ie8还有多少嘛 不请自来,刚好看到这个,也感兴趣。
Flexbox布局最适合应用程序的组件和小规模的布局,而Grid布局更适合那些更大规模的布局。
一个完整的Flexbox指南 这个很完整,可以看看。 南京某小公司,本人只学过flex,用的最多的还是float。。。。。现状是感觉flex还是挺好的,灵活,对于移动端的场景的解决方案也不错啊,文档也不少,grid就不清楚了,未来发展就更不清楚,不敢强答,我先用着float,学好flex,用flex多做几个项目再说吧。 今天刚好在看。
“Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Gridlayout is intended for larger scale layouts.”css-tricks.com/snippets和上面那位仁兄说的应该是一个意思。
不过这篇文章的时间有点久了。不知道现在发展怎么样了。
智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号