前端未来页面布局发展方向是 Flexbox 还是 Grid？
程序员文章站
2022-04-18 21:09:04
...
Flexbox目前支持的浏览器要比Grid多，但是Flexbox&Grid flex的加载貌似有点问题，不知道未来的发展方向如何？
（另外求大神推荐几个不错的Flexbox和Grid布局的网站实例）
另外一个就是案例，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.”https://css-tricks.com/snippets/css/a-guide-to-flexbox/和上面那位仁兄说的应该是一个意思。
不过这篇文章的时间有点久了。不知道现在发展怎么样了。
（另外求大神推荐几个不错的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.”https://css-tricks.com/snippets/css/a-guide-to-flexbox/和上面那位仁兄说的应该是一个意思。
不过这篇文章的时间有点久了。不知道现在发展怎么样了。