搜尋
首頁web前端H5教程前端未来页面布局发展方向是 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
H5代碼:Web開發人員的最佳實踐H5代碼:Web開發人員的最佳實踐Apr 16, 2025 am 12:14 AM

H5代碼的最佳實踐包括:1.使用正確的DOCTYPE聲明和字符編碼;2.採用語義化標籤;3.減少HTTP請求;4.使用異步加載;5.優化圖像。這些實踐能提升網頁的效率、可維護性和用戶體驗。

H5:網絡標準和技術的發展H5:網絡標準和技術的發展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今,经历了显著的发展。1)HTML5引入了Canvas、WebStorage等API,增强了Web应用的复杂性和互动性。2)CSS3增加了动画和过渡功能,使页面效果更加丰富。3)JavaScript通过Node.js和ES6的现代化语法,如箭头函数和类,提升了开发效率和代码可读性,这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速記嗎?探索細節H5是HTML5的速記嗎?探索細節Apr 14, 2025 am 12:05 AM

H5不僅僅是HTML5的簡稱,它代表了一個更廣泛的現代網頁開發技術生態:1.H5包括HTML5、CSS3、JavaScript及相關API和技術;2.它提供更豐富、互動、流暢的用戶體驗,能在多設備上無縫運行;3.使用H5技術棧可以創建響應式網頁和復雜交互功能。

H5和HTML5:網絡開發中常用的術語H5和HTML5:網絡開發中常用的術語Apr 13, 2025 am 12:01 AM

H5與HTML5指的是同一個東西,即HTML5。 HTML5是HTML的第五個版本,帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能,提升了網頁的表現力和交互性。

H5指的是什麼?探索上下文H5指的是什麼?探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5:工具,框架和最佳實踐H5:工具,框架和最佳實踐Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面,支持組件化開發。 2.React通過虛擬DOM優化頁面渲染,適合複雜應用。 3.Webpack用於模塊打包,優化資源加載。

HTML5的遺產:當前了解H5HTML5的遺產:當前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5代碼:可訪問性和語義HTMLH5代碼:可訪問性和語義HTMLApr 09, 2025 am 12:05 AM

H5通過語義化元素和ARIA屬性提升網頁的可訪問性和SEO效果。 1.使用、、等元素組織內容結構,提高SEO。 2.ARIA屬性如aria-label增強可訪問性,輔助技術用戶可順利使用網頁。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。