Grid和Flex對比總結
摘要：
相關文章
常用佈局【類】整理
一、總結
1. 從以下幾個方面作為Grid和Flex的區別：
指定線名稱，...
相關文章
一、總結
1. 從以下幾個方面作為Grid和Flex的區別：
-
指定線名稱，網格，區域 -
排版方向 -
容器內容/專案s內容排版 -
專案屬性
2. 全文總結
-
Grid
- Grid在全域性佈局方面大勝，是元帥
- 網格=>二維佈局，以佈局為基礎，佈局自適應，多維聯動厲害
- 獨立源：可以設定區域及專案選擇區域而與書寫文件脫鉤=>好維護
- 網格分層：z-index(可以看成3維)，脫離文件流
-
Flex
- Flex在區域性佈局方面大勝，是大將
- 彈性=>一維(多行1.5維)，以內容為基礎，內容自適應，單行聯動厲害
- order:半個獨立源
- 排版方向或內容排版方面絕對的高手
- 彈性特點：沒有方向，空間自由分配，自動對齊
3. 具體區分如下
-
指定線名稱，網格，區域
Grid:
-
grid-template-rows/grid-template-columns:指定線名稱，網格
- [線1] 值1|auto|Nfr|minmax(100px, 1fr)[線2] ....
- repeat(N|auto-fill，值1[ 值2 [值3...])
- 允許同一根線有多個名字 [線1 線11 ...]
- 若沒有指定線名稱，則預設為number，從1開始
-
grid-template-areas:指定區域
- 不同網格可以同名
- 有些區域不需要利用，則使用"點"（.）表示
-
grid-auto-rows/grid-auto-columns:剩餘網格 行/列高
Flex:
無
總結
-
Grid：擁有完整的網格佈局屬性(二維) ，畢竟窮舉法所以還擁有設定剩餘網格行/列高
獨立源 ：可以設定區域及專案選擇區域而與書寫文件脫鉤=>好維護 -
Flex：無，而是根據內容佈局(彈性)
半個獨立源 ：order↓會介紹 -
=>
Grid在全域性佈局方面大勝，是元帥 -
↓會介紹:
Grid在區域性佈局方面大勝，是大將
-
排版方向
Grid:
-
grid-auto-flow:指定排版方向 釋義:自動流，即設定流的方向
- row | column 先行後列（預設）| 先列後行
- row dense | column dense 某些專案指定位置以後，剩下的專案怎麼自動放置
Grid因為很多都是要手動設定的，所以擁有對於其餘沒指定的屬性來設定
-
grid-auto-rows/grid-auto-columns:剩餘網格 行/列高 -
grid-auto-flow:row dense | column dense 某些專案指定位置以後，剩下的專案怎麼自動放置
Flex:
-
flex-direction:指定排版方向
- row | column 先行後列（預設）| 先列後行
- row-reverse | column-reverse 反轉
總結
-
排版方向Grid和Flex類似，但Flex稍勝一籌
-
容器內容/專案s內容排版
Grid:
-
justify-content/align-content:指定容器內容排版
- start | end | center | stretch | space-around | space-between | space-evenly
-
justify-items/align-items:指定專案s內容排版 ：相對於該專案
- start | end | center | stretch
Flex:
-
justify-content/align-content:指定容器內容排版
- justify-content：flex-start | flex-end | center | space-between | space-around
- align-content：flex-start | flex-end | center | space-between | space-around | stretch
- align-content只對多行時生效；一行時失效，效果上面是align-items在起作用
-
align-items:指定專案s內容排版 ：相對於該行
- flex-start | flex-end | center | baseline | stretch
總結
-
Grid是網格，較為穩健，所以具有完整的屬性
但專案s內容排版：是相對於該專案，較為孤立，專案s內容聯動排版無 -
Flex是彈性，所以無justify-items屬性，單行時align-items在生效所以align-content無效
但專案s內容排版：是相對於該行，有很好的聯動 -
=>
容器內容/專案s內容排版Grid和Flex類似，但Flex稍勝一籌
-
專案屬性
Grid:基本都是關於網格方面：指定專案所處線/區域
-
grid-row/grid-column:指定專案所處線
- 前row|column線1名稱 / 後row|column線2名稱
-
span關鍵字(表示跨越/佔用幾個網格): span 2/5 === 3/5 === 3/span 2
若沒有指定線名稱，則可以採用預設線名稱，number,從1開始
預設：則由grid-auto-flow屬性決定
-
grid-area:指定專案專案所處區域
- 區域名稱
-
上線 / 右線 / 底線 / 左線:逆時針，方便記憶
等同於 <row-start> / <column-start> / <row-end> / <column-end>
作用和grid-row/grid-column是一樣的，優先順序一樣，書寫順序後面會覆蓋
Flex:基本都是關於彈性方面：放大/縮小比例，伸縮基準值
-
flex-grow/flex-shrink:放大/縮小比例
-
flex-grow：預設0，即如果存在剩餘空間，也不放大
計算：item1/items * 剩餘空間=item放大空間 -
flex-shrink：預設為1，即如果空間不足，該專案將縮小(彈性=>空間不夠肯定要壓縮)
計算：item1/items * 壓縮空間=item縮小空間
-
flex-basis:伸縮基準值
- 預設值為auto
-
flex:是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto
- 即預設值為0 1 auto ，即不放大，平均縮小
- auto:對應 (1 1 auto)，即平均放大，平均縮小
- none :對應 (0 0 auto)，即不放大，不縮小。若專案flex都設定none，則會溢位
相似屬性
-
z-index:多個專案所處區域有交集，可以設定層級
Grid一大特點：網格分層 -
order:定義專案的排列順序 ，預設值為0，值和z-index一樣。可以為負數
Flex彈性佈局，遜色於Grid的文件獨立流
共同屬性
-
justify-self/align-self:設定該專案內容私有排版但Flex沒有justify-self，原因嘛，還是因為內容彈性嘛 (^ _ ^ )
值：等同於justify-items / align-items值:start | end | center | stretch