目錄
回复内容:
首頁 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

熱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.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前 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屬性在H5開發中,常會涉及到元素的定位和佈局問題。這時候,CSS的position屬性就會發揮作用。 position屬性可以控制元素在頁面中的定位方式,包括相對定位(relative)、絕對定位(absolute)、固定定位(fixed)和黏附定位(sticky)。本文將詳細介紹在H5開發中如何靈活運用position屬性

手把手帶你使用CSS Flex和Grid佈局實現3D骰子(附程式碼) 手把手帶你使用CSS Flex和Grid佈局實現3D骰子(附程式碼) Sep 23, 2022 am 09:58 AM

在前端面試中,常會問到如何使用 CSS 實現骰子/麻將佈局。以下這篇文章為大家介紹一下用CSS 創建一個 3D 骰子(Flex和Grid佈局實現3D骰子)的方法,希望對大家有幫助!

CSS 佈局屬性最佳化技巧:position sticky 和 ​​flexbox CSS 佈局屬性最佳化技巧:position sticky 和 ​​flexbox Oct 20, 2023 pm 03:15 PM

CSS版面配置屬性最佳化技巧:positionsticky和flexbox在網頁開發中,版面是一個非常重要的面向。良好的佈局結構可以提高使用者體驗,使頁面更加美觀和易於導航。而CSS佈局屬性則是達成此目標的關鍵。在本文中,我將介紹兩種常用的CSS佈局屬性最佳化技巧:positionsticky和flexbox,並提供特定的程式碼範例。一、positions

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

flex版面的常用屬性有哪些,需要具體程式碼範例Flex佈局是一種用於設計響應式網頁版面的強大工具。它透過使用一組靈活的屬性,可以輕鬆控制網頁中元素的排列方式和尺寸。在本文中,我將介紹Flex佈局的常用屬性,並提供具體的程式碼範例。 display:設定元素的顯示方式為Flex。 .container{display:flex;}flex-directi

AMP是什麼幣? AMP是什麼幣? Feb 24, 2024 pm 09:16 PM

什麼是AMP幣? AMP代幣是由Synereo團隊於2015年創立,作為Synereo平台的主要交易貨幣。 AMP代幣旨在透過多種功能和用途,為用戶提供更好的數位經濟體驗。 AMP代幣的用途AMP代幣在Synereo平台中擁有多重角色與功能。首先,作為平台的加密貨幣獎勵系統的一部分,用戶能夠透過分享和推廣內容來獲得AMP獎勵,這項機制鼓勵用戶更積極參與平台的活動。 AMP代幣也可用於在Synereo平台上推廣和傳播內容。用戶可以透過使用AMP代幣來提升他們的內容在平台上的曝光率,以吸引更多觀眾來查看和分

HTML教學:如何使用Flexbox進行自適應等高等寬等間距佈局 HTML教學:如何使用Flexbox進行自適應等高等寬等間距佈局 Oct 27, 2023 pm 05:51 PM

HTML教學:如何使用Flexbox進行自適應等高等寬等間距佈局,需要具體程式碼範例引言:在現代網頁設計中,佈局是一個非常關鍵的因素。對於需要展示大量內容的頁面來說,如何合理地安排元素的位置和大小,以實現良好的可視性和易用性,是一個重要的問題。 Flexbox(彈性盒佈局)就是一個非常強大的工具,透過它可以輕鬆實現各種靈活的佈局需求。本文將詳細介紹Flexbox

一文詳解三個 flex 屬性對元素的影響 一文詳解三個 flex 屬性對元素的影響 Aug 30, 2022 pm 07:50 PM

在開發的時候常用 flex 這個屬性作用於彈性盒子的子元素,例如:flex:1或flex: 1 1 auto,那麼這個屬性到底控制了元素怎麼的行為呢? flex:1又究竟是什麼意義呢?讓這篇文章帶你徹底了解 flex 屬性吧!

如何使用CSS3的flexbox技術,實現網頁內容的平均分配? 如何使用CSS3的flexbox技術,實現網頁內容的平均分配? Sep 11, 2023 am 11:33 AM

如何使用CSS3的flexbox技術,實現網頁內容的平均分配?隨著網頁設計的發展,人們對於網頁版面的要求也越來越高。為了實現網頁內容的平均分配,CSS3的flexbox技術成為了一個非常有效的解決方案。本文將介紹如何使用flexbox技術來實現網頁內容的平均分配,並給出一些實用的範例。一、什麼是flexbox技術flexbox(彈性佈局)是CSS3新增加的一

See all articles