上篇文章在寫前端經(jīng)典布局方案時升酣，提到了Flex和Grid技術(shù)移稳，接下來就帶著大家一塊去探討一下Flex和Grid到底有什么不同韵丑。

先大體介紹一下兩者的作用：

Flex布局： Flexible Box的縮寫侯谁，也成為彈性布局。它是2009年由W3C提出的新的布局方案堡称，可以響應(yīng)式地實現(xiàn)各種頁面布局瞎抛，目前Flex技術(shù)已經(jīng)得到了所有瀏覽器的支持

Grid布局：Grid 布局又稱為網(wǎng)格布局，是微軟于 2010 年提出的一種新的布局方式却紧，于2016 年提交了該布局的草案桐臊。經(jīng)過近幾年發(fā)展钞艇，兼容性越來越好

一. Flex布局

想必很多小伙伴對于Flex布局已經(jīng)很熟悉了，接下來從基本概念豪硅、語法屬性兩方面去介紹Flex的使用

1.基本概念

容器：任何一個容器(盒子)都可以指定為Flex容器，也就是說挺物，想要使用Flex懒浮，前提條件是把這個盒子聲明為Flex容器

容器成員（項目）：Flex容器中的所有子元素我們稱之為容器成員，也叫作項目(item)

.box {
  /* 這樣就把.box這個盒子聲明為一個Flex容器了 */
  display: flex;
}

注意识藤，設(shè)為 Flex 布局以后砚著，子元素的float、clear和vertical-align等屬性都將失效痴昧。

Flex容器默認(rèn)存在兩條軸：

• 水平的主軸
• 垂直的交叉軸

Flex布局中的項目稽穆，默認(rèn)沿主軸排列

讓人感覺難的，并不是對Flex布局的理解赶撰，而是里面諸多的語法屬性

2. 語法屬性

2.1 應(yīng)用在容器上的屬性

• flex-direction
  • 作用：設(shè)置主軸的方向
  • 取值：
    • row（默認(rèn)值）：主軸為水平方向舌镶，起點在左端
    • row-reverse：主軸為水平方向，起點在右端
    • column：主軸為垂直方向豪娜，起點在上沿
    • column-reverse：主軸為垂直方向餐胀，起點在下沿

• flex-wrap

  • 作用：控制項目在主軸上如何換行
  • 取值：
    • nowrap：不換行
    • wrap：換行，第一行在上面
    • wrap-reverse：換行瘤载，第一行在下面

• justify-content
  • 作用：控制項目在主軸上的對齊方式
  • 取值：
    • flex-start（默認(rèn)值）：左對齊
    • flex-end：右對齊
    • center： 居中
    • space-between：兩端對齊否灾，項目之間的間隔相等
    • space-around：兩側(cè)對齊，每個項目兩側(cè)的間隔相等鸣奔，項目之間的間隔比項目與邊框的間隔大一倍

• align-items
  • 作用：設(shè)置項目在交叉軸上的對齊方式
  • 取值：
    • flex-start：交叉軸的起點對齊
    • flex-end：交叉軸的終點對齊
    • center：交叉軸的中點對齊
    • baseline: 項目的第一行文字的基線對齊
    • stretch（默認(rèn)值）：如果項目未設(shè)置高度或設(shè)為auto墨技，將占滿整個容器的高度

當(dāng)然，Flex容器上還有兩個不太常用的屬性挎狸，分別是：

• flex-flow

  • 作用：是flex-direction和flex-wrap的簡寫扣汪，默認(rèn)值為row nowrap

• align-content

  • 作用：控制多根軸線的對齊方式。如果項目只有一根軸線伟叛，該屬性是無效的

2.2 應(yīng)用在項目上的屬性

• order

  • 作用：設(shè)置項目的排列順序私痹，數(shù)值越小，排列的順序越靠前

• flex-grow

  • 作用：控制項目的放大比例统刮，默認(rèn)為0

• flex-shrink

  • 作用：控制項目的縮小比例紊遵，默認(rèn)為1

• flex-basis

  • 作用：控制項目占據(jù)的主軸空間，可設(shè)置固定的width和height侥蒙，默認(rèn)為auto

• flex

  • 作用：flex-grow暗膜、flex-shrink 和 flex-basis的簡寫，默認(rèn)為0 1 auto鞭衩。后兩個屬性可選
  • 注意：該屬性有兩個快捷值： auto和none学搜，分別對應(yīng)1 1 auto和0 0 auto娃善，建議優(yōu)先使用快捷值寫法

• align-self

  • 作用：設(shè)置項目的對齊方式
  • 取值：除了auto，其它取值均與align-items屬性取值完全一致
    • auto（默認(rèn)值）：表示繼承父元素的align-items屬性瑞佩，如果沒有父元素聚磺，則等同于stretch
    • flex-start
    • flex-end
    • center
    • baseline
    • stretch

3. Flex的特點

從以上的語法不難看出，Flex布局擁有主軸和交叉軸

所有的項目都是依托于兩個軸進(jìn)行位置排列的炬丸，所以可以把Flex布局看成是一種"軸線布局"

從維度的角度上看瘫寝，Flex布局也是一維布局

二. Grid布局

1. 基本概念

Grid布局跟Flex布局一樣，也存在容器和項目的概念稠炬。

除此之外焕阿，Grid布局中還有行、列首启、單元格暮屡、網(wǎng)格線的概念

1.1 行和列

容器里面的水平區(qū)域稱為"行"（row），垂直區(qū)域稱為"列"（column）

1.2 單元格

容器中行和列的交匯點叫做單元格（cell）

1.3 網(wǎng)格線

水平網(wǎng)格線劃分出行毅桃，垂直網(wǎng)格線劃分出列

x 行有 x + 1 條水平網(wǎng)格線褒纲；y 列有 y + 1 條垂直網(wǎng)格線

如圖：2行有3條水平網(wǎng)格線，3列有4條垂直網(wǎng)格線

2. 語法屬性

?? Grid布局中關(guān)于容器和項目的屬性很多很多Ｔ糠伞Ｍ獬А！膽小勿入４小Ｖ！ ??

2.1 應(yīng)用在容器上的屬性

中國人不騙中國人论悴，相信我掖棉，你一定會崩潰的 ??

• display: grid;
• grid-template-columns、grid-template-rows
• grid-row-gap膀估、grid-column-gap幔亥、grid-gap
• grid-template-areas
• grid-auto-flow
• justify-items、align-items察纯、place-items
• justify-content帕棉、align-content、place-content
• grid-auto-columns饼记、grid-auto-rows
• grid-template香伴、grid

言簡意賅，給大家以最舒服具则、最簡潔的方式總結(jié)一下（輕點噴...）

1. display: grid;用來聲明盒子為網(wǎng)格布局

2. grid-template-columns定義每一列的列寬即纲，grid-template-rows定義每一行的行高

3. grid-row-gap和grid-column-gap分別設(shè)置行間距和列間距，grid-gap是它倆的合并簡寫形式

4. grid-template-areas用來劃定區(qū)域

5. grid-auto-flow用來指定項目的排列順序博肋，可以通過該屬性實現(xiàn)各種各樣的排列效果低斋，很實用蜂厅！

6. justify-items和align-items分別控制單元格內(nèi)容的水平和垂直對齊，place-items是它倆的合并簡寫形式

7. justify-content和align-content控制整個內(nèi)容區(qū)域在容器中的水平和垂直位置膊畴，place-content是它倆的合并簡寫形式

8. grid-auto-columns和grid-auto-rows用來設(shè)置瀏覽器自動創(chuàng)建的多余網(wǎng)格的列寬和行高

9. grid-template是grid-template-columns掘猿、grid-template-rows和grid-template-areas這三個屬性的合并簡寫形式

10. grid屬性是grid-template-rows、grid-template-columns唇跨、grid-template-areas术奖、 grid-auto-rows、grid-auto-columns轻绞、grid-auto-flow這六個屬性的合并簡寫形式

第9和第10項，因為合并的屬性比較多佣耐，從易讀政勃、易寫的角度上看，不建議使用合并屬性

2.2 應(yīng)用在項目上的屬性

• grid-column-start兼砖、grid-column-end奸远、grid-row-start、grid-row-end
• grid-column讽挟、grid-row
• grid-area
• justify-self懒叛、align-self、place-self

1. grid-column-start耽梅、grid-column-end薛窥、grid-row-start、grid-row-end用來指定項目的四個邊框在哪根網(wǎng)格線眼姐，從而設(shè)置項目的位置诅迷。此設(shè)置可以實現(xiàn)各種排列組合，很實用众旗！

2. grid-column屬是grid-column-start和grid-column-end的合并簡寫形式罢杉，grid-row屬性是grid-row-start屬性和grid-row-end的合并簡寫形式

3. grid-area指定項目放在哪一個區(qū)域。grid-area還可用作grid-row-start贡歧、grid-column-start滩租、grid-row-end、grid-column-end的合并簡寫形式利朵，直接指定項目的位置

4. justify-self設(shè)置單元格內(nèi)容的水平位置律想，跟justify-items屬性的用法完全一致，但只作用于單個項目

   align-self設(shè)置單元格內(nèi)容的垂直位置绍弟，跟align-items屬性的用法完全一致蜘欲，也是只作用于單個項目

   place-self是align-self和justify-self的合并簡寫形式。

3. Grid的特點

其實從Grid布局的基本概念可以看出晌柬，Grid布局將容器劃分成"行"和"列"姥份，并產(chǎn)生單元格郭脂，然后指定"項目所在"的單元格，可以看作是二維布局

由于可以主動的去指定項目所處的區(qū)域（位置）澈歉，所以我們在進(jìn)行復(fù)雜結(jié)構(gòu)布局時展鸡，Grid布局很顯然要比Flex布局的操作性強，更容易也更方便的實現(xiàn)各種復(fù)雜且好看的布局

雖然從布局的操作性和復(fù)雜度上來看埃难，Grid布局要比Flex布局強大莹弊！

但是你不能避免Grid布局這個"老六"所帶來的一些瀏覽器兼容性、響應(yīng)式設(shè)計涡尘、性能優(yōu)化等一系列的問題

三. 兩者的對比總結(jié)

區(qū)別

• Flex布局是一維布局忍弛，Grid布局是二維布局
• 從布局的操作性和復(fù)雜度上看，Grid布局要強于Flex布局
• Grid布局具有兼容性問題考抄，不友好
• 從學(xué)習(xí)時間成本上看细疚，因Grid布局的屬性要遠(yuǎn)多于Flex布局，所以Grid布局的學(xué)習(xí)時間成本要大一些

相同

• 兩者均是目前布局方案中的主流川梅，因其各自的特點疯兼，應(yīng)用的場景也不盡相同