相關(guān)文章
一史煎、總結(jié)
1. 從以下幾個(gè)方面作為Grid和Flex的區(qū)別：
指定線名稱，網(wǎng)格夺姑，區(qū)域排版方向容器內(nèi)容/項(xiàng)目s內(nèi)容排版項(xiàng)目屬性
2. 全文總結(jié)
Grid
- Grid在全局布局方面大勝，是元帥
- 網(wǎng)格=>二維布局，以布局為基礎(chǔ)黍翎，布局自適應(yīng)，多維聯(lián)動(dòng)厲害
- 獨(dú)立源：可以設(shè)置區(qū)域及項(xiàng)目選擇區(qū)域而與書寫文檔脫鉤=>好維護(hù)
- 網(wǎng)格分層：z-index(可以看成3維)艳丛，脫離文檔流
Flex
- Flex在局部布局方面大勝匣掸，是大將
- 彈性=>一維(多行1.5維)趟紊，以內(nèi)容為基礎(chǔ)，內(nèi)容自適應(yīng)碰酝，單行聯(lián)動(dòng)厲害
- order:半個(gè)獨(dú)立源
- 排版方向或內(nèi)容排版方面絕對(duì)的高手
- 彈性特點(diǎn)：沒有方向霎匈，空間自由分配，自動(dòng)對(duì)齊
3. 具體區(qū)分如下
指定線名稱送爸，網(wǎng)格铛嘱，區(qū)域Grid:
grid-template-rows/grid-template-columns:指定線名稱，網(wǎng)格
- [線1] 值1|auto|Nfr|minmax(100px, 1fr) [線2] ....
- repeat(N|auto-fill袭厂，值1[ 值2 [值3...])
- 允許同一根線有多個(gè)名字 [線1 線11 ...]
- 若沒有指定線名稱弄痹，則缺省為number，從1開始
grid-template-areas:指定區(qū)域
- 不同網(wǎng)格可以同名
- 有些區(qū)域不需要利用嵌器，則使用"點(diǎn)"（.）表示
grid-auto-rows/grid-auto-columns:剩余網(wǎng)格 行/列高
Flex:
無總結(jié)
Grid：擁有完整的網(wǎng)格布局屬性(二維)肛真，畢竟窮舉法所以還擁有設(shè)置剩余網(wǎng)格行/列高
獨(dú)立源：可以設(shè)置區(qū)域及項(xiàng)目選擇區(qū)域而與書寫文檔脫鉤=>好維護(hù)Flex：無，而是根據(jù)內(nèi)容布局(彈性)
半個(gè)獨(dú)立源：order ↓會(huì)介紹- =>
Grid在全局布局方面大勝爽航，是元帥- ↓會(huì)介紹:
Grid在局部布局方面大勝蚓让，是大將
排版方向Grid:
grid-auto-flow:指定排版方向 釋義:自動(dòng)流，即設(shè)置流的方向
- row | column 先行后列（默認(rèn)）| 先列后行
- row dense | column dense 某些項(xiàng)目指定位置以后讥珍，剩下的項(xiàng)目怎么自動(dòng)放置
Grid因?yàn)楹芏喽际且謩?dòng)設(shè)置的历极，所以擁有對(duì)于其余沒指定的屬性來設(shè)置
grid-auto-rows/grid-auto-columns:剩余網(wǎng)格 行/列高grid-auto-flow:row dense | column dense 某些項(xiàng)目指定位置以后，剩下的項(xiàng)目怎么自動(dòng)放置Flex:
flex-direction:指定排版方向
- row | column 先行后列（默認(rèn)）| 先列后行
- row-reverse | column-reverse 反轉(zhuǎn)
總結(jié)
排版方向Grid和Flex類似衷佃，但Flex稍勝一籌
容器內(nèi)容/項(xiàng)目s內(nèi)容排版Grid:
justify-content/align-content:指定容器內(nèi)容排版
- start | end | center | stretch | space-around | space-between | space-evenly
justify-items/align-items:指定項(xiàng)目s內(nèi)容排版 ：相對(duì)于該項(xiàng)目
- start | end | center | stretch
Flex:
justify-content/align-content:指定容器內(nèi)容排版
- 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只對(duì)多行時(shí)生效趟卸；一行時(shí)失效，效果上面是align-items在起作用
align-items:指定項(xiàng)目s內(nèi)容排版 ：相對(duì)于該行
- flex-start | flex-end | center | baseline | stretch
總結(jié)
- Grid是網(wǎng)格氏义，較為穩(wěn)健锄列，所以具有完整的屬性
但項(xiàng)目s內(nèi)容排版：是相對(duì)于該項(xiàng)目，較為孤立惯悠，項(xiàng)目s內(nèi)容聯(lián)動(dòng)排版無- Flex是彈性邻邮，所以無justify-items屬性，單行時(shí)align-items在生效所以align-content無效
但項(xiàng)目s內(nèi)容排版：是相對(duì)于該行克婶，有很好的聯(lián)動(dòng)- =>
容器內(nèi)容/項(xiàng)目s內(nèi)容排版Grid和Flex類似筒严，但Flex稍勝一籌
項(xiàng)目屬性Grid:
基本都是關(guān)于網(wǎng)格方面：指定項(xiàng)目所處線/區(qū)域
grid-row/grid-column:指定項(xiàng)目所處線
- 前row|column線1名稱 / 后row|column線2名稱
span關(guān)鍵字(表示跨越/占用幾個(gè)網(wǎng)格): span 2/5 === 3/5 === 3/span 2
若沒有指定線名稱，則可以采用缺省線名稱情萤，number,從1開始
缺恃纪堋：則由grid-auto-flow屬性決定
grid-area:指定項(xiàng)目項(xiàng)目所處區(qū)域
- 區(qū)域名稱
- 上線 / 右線 / 底線 / 左線 :逆時(shí)針，方便記憶
等同于 <row-start> / <column-start> / <row-end> / <column-end>
作用和grid-row/grid-column是一樣的筋岛，優(yōu)先級(jí)一樣娶视，書寫順序后面會(huì)覆蓋Flex:
基本都是關(guān)于彈性方面：放大/縮小比例，伸縮基準(zhǔn)值
flex-grow/flex-shrink:放大/縮小比例
- flex-grow：默認(rèn)0泉蝌，即如果存在剩余空間歇万，也不放大
計(jì)算：item1/items * 剩余空間=item放大空間- flex-shrink：默認(rèn)為1，即如果空間不足勋陪，該項(xiàng)目將縮小(彈性=>空間不夠肯定要壓縮)
計(jì)算：item1/items * 壓縮空間=item縮小空間
flex-basis:伸縮基準(zhǔn)值
- 默認(rèn)值為auto
flex:是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫贪磺，默認(rèn)值為0 1 auto
- 即默認(rèn)值為0 1 auto ，即不放大诅愚，平均縮小
- auto:對(duì)應(yīng) (1 1 auto)寒锚，即平均放大，平均縮小
- none :對(duì)應(yīng) (0 0 auto)违孝，即不放大刹前，不縮小。若項(xiàng)目flex都設(shè)置none雌桑，則會(huì)溢出
相似屬性
z-index:多個(gè)項(xiàng)目所處區(qū)域有交集喇喉，可以設(shè)置層級(jí)
Grid一大特點(diǎn)：網(wǎng)格分層order:定義項(xiàng)目的排列順序，默認(rèn)值為0校坑，值和z-index一樣拣技。可以為負(fù)數(shù)
Flex彈性布局耍目，遜色于Grid的文檔獨(dú)立流
共同屬性
justify-self/align-self:設(shè)置該項(xiàng)目?jī)?nèi)容私有排版
但Flex沒有justify-self膏斤，原因嘛，還是因?yàn)閮?nèi)容彈性嘛 (^ _ ^)
值：等同于justify-items / align-items值:start | end | center | stretch
