[爆卦]css grid flex差異是什麼?優點缺點精華區懶人包

為什麼這篇css grid flex差異鄉民發文收入到精華區:因為在css grid flex差異這個討論話題中,有許多相關的文章在討論,這篇最有參考價值!作者lovdkkkk (dk)看板Soft_Job標題Re: [討論] 大家都有熱情研究新技術嗎?時...



個人覺得各種新 工具/框架/語言 可以不用追得太勤,
剛開始雷多容易浪費很多時間, 本身又可能大改版 (看看ng),
也不一定能打開市佔說不定不到兩年就式微,
真要用時再跟官網教學跑一下上手也很快,
實在沒有花大量時間心力追踪的必要性/價值

但是基礎項目的進展/新規格倒是可以追一下,
雖然一開始支援度也不好不太能實際運用,
但是追基礎項目有額外的好處,
就是對整體運行環境更全面與透徹的了解

而學那些新東西只是個開始, 重要的是去知道為什麼要有新東西,
舊的東西有什麼問題, 新的東西能解決什麼問題,
再更進一步去了解為什麼會有那些問題,
理解那些 "為什麼" 之後, 才能幫助未來在解決問題時做出更恰當的選擇
讓你能
解決更多原本難解或放棄的問題

用更好的方式解決一樣的問題

具體來說可以怎麼做呢? 以文中提到的排版為例

1. 多查文章
例如估狗
"XXX layout advantages disadvantages"
"XXX vs OOO"
"XXX shema" (找 w3 的文件)
"XXX performance"
多看一些就會對於每一種做法的優缺點有概念
比方 w3 文件就會講為什麼要做 grid,
過去用 table 有什麼問題, 用 grid 有什麼好處
https://www.w3.org/TR/css-grid-1/#background
有需要的話就寫些小範例測試一下

2. 試著追根究底
例如 "慢一秒"
為什麼會慢一秒? 為什麼為什麼為什麼?
是因為 dom 元素比較多? 元素特性本身需要瀏覽器做較多的運算?
還是其它?

如果是很多運算, 那為什麼會有很多運算?
是什麼特性或規格要求造成需要那麼多運算?
(ex table 自動對齊, flexbox/grid strech/自動調間距等)

搭配 1., 可以做進一步的確認,
另外能更廣泛也更深入的了解其它部份
一樣的有需要的話就寫些小範例測試一下

比方排版
會用 table/div/flexbox/grid 排版只是剛開始,

接下來要用以上 1. 2. 的做法去找出問題及原因
ex
table 天生 dom 元素就是會多,
可是它支援自動對齊很方便
但是因為自動對齊動不動會觸發瀏覽器重算...
另外它本身個性很強, 給它 tr td 的 style 經常是被當參考而已,
容易被內容撐大
另外 IE 上還有對行/列數的限制

div 嘛...就 div,
目前最普遍大多數人最熟瀏覽器支援度也最高
排版時操控性狂勝 table, 但要橋很細部的間距/對齊還是有點麻煩

flexbox 支援很多排版模式, 相當便利,
很多時候用 div 要自己橋半天的用 flexbox 省事很多
(ex 不定數量元素等間距)
它是用來做一維 (一行或一列) 的排版, 適合排小區塊,
用巢狀 flexbox 排全部就各方面來說不會是個好主意

另外較老舊的瀏覽器哭哭

grid
以 CSS 的方式做到如 table 的二維排版
但是它不像 table 依賴 dom 元素,
而是另外以 CSS 做設置,
適合排大區塊

但更新, 老瀏覽器哭哭

經過以上就可以得到很多 "原件"
排版 對齊 style 重算 一維 二維 瀏覽器支援度 dom數量

之後有目標要達成 或有問題要解決時,
它們就能給你依據
ex
有一批資料要顯示, 數量不會很大
== 設計對白 ==
嘿 XXX 十分鐘內把某某資料印成表格給我
== 設計對白 ==
> 用 table 很方便的快速完成吧
有個專案要支援到 ie8, 但版面要求普普, 不要破圖就好
> div 無雙, 搭配寫死的 size/留白,
不用一堆動態調整效能也比較省
某網站只需要支援最新的 FF/Chrome
但要求的排版細節用 div 或 table 相當難橋
> 用 grid 排頁面 layout, div 排簡單的部份,
flexbox 排複雜的細部


總結,
學新東西只是個開使, 要順著繼續往下鑽,
順便對 "那些東西" 以及在它背後的整個運行環境做深入的了解,
學習會更有意義&幫助

大概是這樣


※ 引述《peanut97 (丁丁)》之銘言:
: 做軟體這一行,如果有熱情的話好像都過得很快樂。
: 小弟是工程師。
: 自覺沒有很高的熱情,能時時研究新技術,並用新技術來解決問題。
: 如果趨勢已經變了,當然還是會學。
: 但是每一次在學新東西時,並不會有很高的興奮感。
: 拿新技術來解決問題時,也不會有很大的成就感。
: (好像很多人會因學習新技術而來解決問題,會有開心感?)
: 我總是覺得:這種東西,用以前的方式也能做啊。只是慢了1秒。
: 就像網頁,以前都用table排版,後來變成 div排版,現在主流是flexbox排版
: 而grid 排版等著在後面。
: 我也覺得table排版很廢,現在也是跟著主流使用flexbox排版,
: 也覺得很棒,好多東西都排的出來!甚至可以說「用flexbox排版 沒有排不出來的版」
: 但是總會覺得,明明flexbox已經這麼好用了。為什麼人還要發明grid?
: 過了一陣子又要學新東西......@@
: 曾經問過熱愛技術的主管這個議題(我們是該追求技術還是追求解決問題就好?)
: 他短回:你用表格排版也能解決問題啊。
: 不太知道怎麼形容我的感覺。
: 或是遇過有些人,總是能對「新技術」提出他自己的看法。
: 例如前陣子 React.js, Angular.js. Vue.js 出來沒多久時
: 在社群聚會上,就看到有人謙虛的說他三個都用過,他覺得哪個好用、
: 哪個不好用....之類的批判。
: 或是PHP 7出來沒多久時,後端的工程師朋友就開始會說「喔他怎樣怎樣」
: 除了客觀描述,還能加上「自己的一點看法」
: 當然那些主觀的看法、個人的批判都是他個人的。
: 但是,我就發現自己完全做不到。
: 新技術出來,我只能一直跟在後面跑(學),光了解它在幹嘛都來不及(學不太懂了)
: 根本不可能再提出自己的看法。
: (我在技術外,在人生、工作選擇、哲學、人際關係上,倒是常常有自己的批判力的。
: 背包旅行、社運、女性主義、平等、自由啊等等的,都有自己的想法。
: 朋友常常說我是個很有想法的人。但是一旦到了寫程式領域, 就一點自己的想法也沒有,
: 反而有點害怕與反感。
: 我唯一的看法就是:『馬的,為什麼又要出新東西來搞大家啊?就像 React.js 16.3好像
: 又要把舊的componentWillMount等函數拿掉,改成新的函數@@ 』
: 我寫程式已經3年了,也做過3份工作了。都是工程師。
: 但是常發現有一些剛畢業進來寫程式的同事,熬了一陣子,就開始能對各種技術
: 提出自己的看法。或者說,「有自信面對未來的新技術」。
: 好像強烈的感覺到自己的人格特質,似乎跟某些喜歡寫程式的人不一樣。
: 當然自己目前還是會繼續做這行,畢竟雖然沒那麼強,但是
: 至少還算跟得上,餓不死。但有時候總會不知道該怎麼自處QQ
: 就是想問問大家,身為工程師的你們,都對「新技術」有熱情嗎?
: 還是…我是少數?

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 118.163.80.109
※ 文章網址: https://www.ptt.cc/bbs/Soft_Job/M.1523588654.A.D90.html
Masakiad: 推 投資在刀口上 04/13 12:06
cphe: 推~ 追太勤每次的改版還得追差異 04/13 12:12
rayway30419: grid+flexbox才是完整的modern web 04/13 12:24

可惜 modern web 只有 modern browser 能跑 XD

menshuei: 合必分分必合,最後還是回到DW的道路。 04/13 12:26

notepad / vi 表示 :

mpjp: 推 04/13 12:39
Eric0605: 推 04/13 12:52
bobbyaxe: 推 04/13 19:03
peanut97: 謝謝 04/13 19:21
remmurds: 有遇到那種技術狂什麼都要SPA 連公司後臺用的系統也要SP 04/13 20:08
remmurds: A 04/13 20:08

SPA Certified

https://www.youtube.com/watch?v=lB1EIY7Azbo
(誤)

abccbaandy: 後台才適合SPA吧 04/13 21:08

與其說不適合, 不如說是沒什麼需要,
一般來說後台是久久才有人去用一下, 不像前台要面對許多使用者,
使用 SPA 帶來的好處 (減少傳輸量等) 效益差別沒有很大

不過還是要看情況啦 @@

rollr: 請問什麼是原件?還是指元件? 04/13 23:47

其實我不知道該怎麼說, 元件/元素/項目 都可以,
反正就是開發時可以綜和考量的幾個面向這樣

※ 編輯: lovdkkkk (118.163.80.109), 04/14/2018 00:18:12

你可能也想看看

搜尋相關網站