1、flexbox（彈性盒布局模型）
Flexible Box?簡稱?flex，意為”彈性布局”，可以簡便、完整、響應(yīng)式地實現(xiàn)各種頁面布局。采用Flex布局的元素，稱為flex容器container。它的所有子元素自動成為容器成員，稱為flex項目item。
容器中默認(rèn)存在兩條軸，主軸和交叉軸，呈90度關(guān)系。項目默認(rèn)沿主軸排列，通過flex-direction來決定主軸的方向。
關(guān)于flex常用的屬性，我們可以劃分為容器屬性和容器成員屬性。
容器屬性
1）flex-direction
決定主軸的方向(即項目的排列方向)。
屬性對應(yīng)如下：
a、row（默認(rèn)值）：主軸為水平方向，起點在左端。
b、row-reverse：主軸為水平方向，起點在右端。
c、column：主軸為垂直方向，起點在上沿。
d、column-reverse：主軸為垂直方向，起點在下沿。
2）flex-wrap
彈性元素永遠(yuǎn)沿主軸排列，那么如果主軸排不下，通過flex-wrap決定容器內(nèi)項目是否可換行。
屬性對應(yīng)如下：
a、nowrap（默認(rèn)值）：不換行。
b、wrap：換行，第一行在上方。
c、wrap-reverse：換行，第一行在下方。
默認(rèn)情況是不換行，但這里也不會任由元素直接溢出容器，會涉及到元素的彈性伸縮。會自動縮小盒子寬度使其一行顯示，縮小最小范圍為父元素的寬度。
當(dāng)設(shè)置為 flex-wrap: wrap; 就是換行。
flex-flow是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row nowrap。
3）justify-content
定義了項目在主軸上的對齊方式。
屬性對應(yīng)如下：
a、flex-start（默認(rèn)值）：左對齊。
b、flex-end：右對齊。
c、center：居中。
d、space-between：兩端對齊，項目之間的間隔都相等。
e、space-around：兩個項目兩側(cè)間隔相等。
4）align-items
定義項目在交叉軸上如何對齊。
屬性對應(yīng)如下：
a、flex-start：交叉軸的起點對齊
b、flex-end：交叉軸的終點對齊
c、center：交叉軸的中點對齊
d、baseline: 項目的第一行文字的基線對齊
e、stretch（默認(rèn)值）：如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。
如果flex-items沒有定義高度，在垂直方向上默認(rèn)會拉伸和父盒子一樣的高度。也就是align-items：stretch、normal。
5）align-content
定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
屬性對應(yīng)如嚇：
a、flex-start：與交叉軸的起點對齊。
b、flex-end：與交叉軸的終點對齊。
c、center：與交叉軸的中點對齊。
d、space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
e、space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
f、stretch（默認(rèn)值）：軸線占滿整個交叉軸。
容器屬性
1）order
定義項目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。
2）flex-grow
上面講到當(dāng)容器設(shè)為flex-wrap: nowrap;不換行的時候，容器寬度有不夠分的情況，彈性元素會根據(jù)flex-grow來決定。定義項目的放大比例（容器寬度>元素總寬度時如何伸展），默認(rèn)為0，即如果存在剩余空間，也不放大。
如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）
如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據(jù)的剩余空間將比其他項多一倍。
3）flex-shrink
定義了項目的縮小比例（容器寬度<元素總寬度時如何收縮），默認(rèn)為1，即如果空間不足，該項目將縮小。
如果所有項目的flex-shrink屬性都為1，當(dāng)空間不足時，都將等比例縮小。
如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。
4）flex-basis
設(shè)置的是元素在主軸上的初始尺寸，所謂的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸。
瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間，默認(rèn)值為auto，即項目的本來大小，如設(shè)置了width則元素尺寸由width/height決定（主軸方向），沒有設(shè)置則由內(nèi)容決定。
當(dāng)設(shè)置為0的是，會根據(jù)內(nèi)容撐開。
它可以設(shè)為跟width或height屬性一樣的值（比如350px），則項目將占據(jù)固定空間。
5）flex
flex是flex-grow、flex-shrink、flex-basis的縮寫。
flex-grow 定義項目的的放大比例，用來“瓜分”父項的“剩余空間”。當(dāng)父元素的寬度大于所有子元素的寬度的和時（即父元素會有剩余空間），子元素如何索取分配父元素的剩余空間。值越大，索取的越厲害。
a、默認(rèn)為0，即 即使存在剩余空間，也不會放大；
b、所有項目的flex-grow為1：等分剩余空間（自動放大占位）；
c、flex-grow為n的項目，占據(jù)的空間（放大的比例）是flex-grow為1的n倍。
flex-shrink 定義項目的縮小比例，用來“吸收”超出的空間。父元素的寬度小于所有子元素的寬度的和時（即子元素會超出父元素），子元素如何縮小自己的寬度的。值越大，減小的越厲害。
a、默認(rèn)為1，即 如果空間不足，該項目將縮小；
b、所有項目的flex-shrink為1：當(dāng)空間不足時，縮小的比例相同；
c、flex-shrink為0：空間不足時，該項目不會縮??；
d、flex-shrink為n的項目，空間不足時縮小的比例是flex-shrink為1的n倍。
flex-basis 用于設(shè)置子項的占用空間，在分配多余空間之前，項目占據(jù)的主軸空間（main size），瀏覽器根據(jù)此屬性計算主軸是否有多余空間。該屬性用來設(shè)置元素的寬度，其實，width也可以設(shè)置寬度。如果元素上同時設(shè)置了width和flex-basis，那么width 的值就會被flex-basis覆蓋掉。
a、默認(rèn)值為auto，即 項目原本大??；
b、設(shè)置后項目將占據(jù)固定空間。
flex 的不同取值
a、flex屬性的默認(rèn)值為：0 1 auto （不放大會縮?。?/b>
b、flex為none：0 0 auto ?（不放大也不縮?。?/p>
c、flex為auto：1 1 auto ?（放大且縮?。?；
d、flex為一個非負(fù)數(shù)字n：該數(shù)字為flex-grow的值。
?flex：n；===? flex-grow：n；flex-shrink：1；flex-basis：0%；
e、flex為兩個非負(fù)數(shù)字n1，n2： 分別為flex-grow和flex-shrink的值。
flex：n1 n2;? ===? flex-grow：n1；flex-shrink：n2；flex-basis：0%；
f、flex為一個長度或百分比L：視為flex-basis的值，
flex: L;? ===? flex-grow：1；flex-shrink：1；flex-basis：L；
g、flex為一個非負(fù)數(shù)字n和一個長度或百分比L：分別為flex-grow和flex-basis的值。
?flex：n L；===? flex-grow：n；flex-shrink：1；flex-basis：L;
flex：1即為flex-grow：1，自動放大占滿剩余空間。
6）align-self
許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
2、網(wǎng)格布局
Grid?布局即網(wǎng)格布局，是一個二維的布局方式，由縱橫相交的兩組網(wǎng)格線形成的框架性布局結(jié)構(gòu)，能夠同時處理行與列。擅長將一個頁面劃分為幾個主要區(qū)域，以及定義這些區(qū)域的大小、位置、層次等關(guān)系。
設(shè)置display:grid/inline-grid的元素就是網(wǎng)格布局容器，這樣就能出發(fā)瀏覽器渲染引擎的網(wǎng)格布局算法。
Grid?布局屬性可以分為兩大類：容器屬性，項目屬性。
容器屬性
1）display 屬性
在元素上設(shè)置display：grid?或?display：inline-grid來創(chuàng)建一個網(wǎng)格容器。
a、display：grid 則該容器是一個塊級元素；
b、display：inline-grid 則容器元素為行內(nèi)元素。
2）grid-template-columns 屬性，grid-template-rows 屬性
grid-template-columns：屬性設(shè)置列寬；
grid-template-rows：屬性設(shè)置行高。
以上表示固定列寬為 200px 200px 200px，行高為 50px 50px。
上述代碼可以看到重復(fù)寫單元格寬高，通過使用repeat()函數(shù)，可以簡寫重復(fù)的值：
a、第一個參數(shù)是重復(fù)的次數(shù)；
b、第二個參數(shù)是重復(fù)的值。
grid-template-columns：200px 1fr 2fr?表示第一個列寬設(shè)置為 200px，后面剩余的寬度分為兩部分，寬度分別為剩余寬度的 1/3 和 2/3。fr：片段，為了方便表示比例關(guān)系。
grid-template-columns: 100px auto 100px表示第一第三列為 100px，中間由瀏覽器決定長度。
3）grid-row-gap 屬性， grid-column-gap 屬性， grid-gap 屬性
grid-row-gap?屬性、grid-column-gap?屬性分別設(shè)置行間距和列間距。grid-gap?屬性是兩者的簡寫形式。
grid-row-gap: 10px?表示行間距是 10px
grid-column-gap: 20px?表示列間距是 20px
grid-gap: 10px 20px等同上述兩個屬性。
4）grid-auto-flow 屬性
容器的子元素會按照順序，自動放置在每一個網(wǎng)格。順序就是由grid-auto-flow決定，默認(rèn)為行，代表"先行后列"，即先填滿第一行，再開始放入第二行。
當(dāng)修改成column后
5）justify-items 屬性， align-items 屬性， place-items 屬性
justify-items?屬性設(shè)置單元格內(nèi)容的水平位置（左中右）；
align-items?屬性設(shè)置單元格的垂直位置（上中下）。
place-items屬性是align-items屬性和justify-items屬性的合并簡寫形式。
屬性值
a、start：對齊單元格的起始邊緣
b、end：對齊單元格的結(jié)束邊緣
c、center：單元格內(nèi)部居中
d、stretch：拉伸，占滿單元格的整個寬度（默認(rèn)值）
6）justify-content 屬性， align-content 屬性， place-content 屬性
justify-content屬性是整個內(nèi)容區(qū)域在容器里面的水平位置（左中右）；
align-content屬性是整個內(nèi)容區(qū)域的垂直位置（上中下）。
屬性值有：
a、start - 對齊容器的起始邊框；
b、end - 對齊容器的結(jié)束邊框；
c、center - 容器內(nèi)部居中；
e、space-around - 每個項目兩側(cè)的間隔相等。所以，項目之間的間隔比項目與容器邊框的間隔大一倍；
f、space-between - 項目與項目的間隔相等，項目與容器邊框之間沒有間隔；
g、space-evenly - 項目與項目的間隔相等，項目與容器邊框之間也是同樣長度的間隔；
h、stretch - 項目大小沒有指定時，拉伸占據(jù)整個網(wǎng)格容器。
.
項目屬性
1）grid-column-start 屬性、grid-column-end 屬性、grid-row-start 屬性以及grid-row-end 屬性
指定網(wǎng)格項目所在的四個邊框，分別定位在哪根網(wǎng)格線，從而指定項目的位置
grid-column-start 屬性：左邊框所在的垂直網(wǎng)格線
grid-column-end 屬性：右邊框所在的垂直網(wǎng)格線
grid-row-start 屬性：上邊框所在的水平網(wǎng)格線
grid-row-end 屬性：下邊框所在的水平網(wǎng)格線
通過設(shè)置grid-column屬性，指定1號項目的左邊框是第二根垂直網(wǎng)格線，右邊框是第四根垂直網(wǎng)格線
2）justify-self 屬性、align-self 屬性以及 place-self 屬性
justify-self屬性設(shè)置單元格內(nèi)容的水平位置（左中右），跟justify-items屬性的用法完全一致，但只作用于單個項目。
align-self屬性設(shè)置單元格內(nèi)容的垂直位置（上中下），跟align-items屬性的用法完全一致，也是只作用于單個項目
