目录
回复内容:
首页 web前端 H5教程 前端未来页面布局发展方向是 Flexbox 还是 Grid?

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

Jun 07, 2016 am 08:45 AM
amp flex flexbox grid

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和上面那位仁兄说的应该是一个意思。
不过这篇文章的时间有点久了。不知道现在发展怎么样了。
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

H5中position属性的灵活运用技巧 H5中position属性的灵活运用技巧 Dec 27, 2023 pm 01:05 PM

H5中position属性的灵活运用技巧

常用的Flex布局属性有哪些 常用的Flex布局属性有哪些 Feb 25, 2024 am 10:42 AM

常用的Flex布局属性有哪些

手把手带你使用CSS Flex和Grid布局实现3D骰子(附代码) 手把手带你使用CSS Flex和Grid布局实现3D骰子(附代码) Sep 23, 2022 am 09:58 AM

手把手带你使用CSS Flex和Grid布局实现3D骰子(附代码)

HTML教程:如何使用Flexbox进行自适应等高等宽等间距布局 HTML教程:如何使用Flexbox进行自适应等高等宽等间距布局 Oct 27, 2023 pm 05:51 PM

HTML教程:如何使用Flexbox进行自适应等高等宽等间距布局

CSS 布局属性优化技巧:position sticky 和 flexbox CSS 布局属性优化技巧:position sticky 和 flexbox Oct 20, 2023 pm 03:15 PM

CSS 布局属性优化技巧:position sticky 和 flexbox

AMP是什么币? AMP是什么币? Feb 24, 2024 pm 09:16 PM

AMP是什么币?

一文详解三个 flex 属性对元素的影响 一文详解三个 flex 属性对元素的影响 Aug 30, 2022 pm 07:50 PM

一文详解三个 flex 属性对元素的影响

带你吃透Flex布局的三个属性:flex-grow、flex-shrink、flex-basis 带你吃透Flex布局的三个属性:flex-grow、flex-shrink、flex-basis Dec 06, 2022 pm 08:37 PM

带你吃透Flex布局的三个属性:flex-grow、flex-shrink、flex-basis

See all articles