flex佈局與grid佈局
詳情：
grid佈局：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
flex佈局：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
問題：怎麼讓一個 div 水平垂直居中？
<div class="parent"> <div class="child"></div> </div>
解決：
flex佈局：
div.parent { display: flex; justify-content: center; align-items: center; }
grid佈局：
div.parent { display: grid; } div.child { justify-self: center; align-self: center; }
一 、flex佈局
任何一個容器都可以指定為Flex佈局，設定 display:flex;設定這個屬性之後，子元素的float,clear和vertical-align屬性將會失效。
flex容器預設有兩根軸：水平的主軸（main axis）垂直的交叉軸（cross axis）
用表格的方式來一目瞭然的顯示它的屬性值：
|
屬性名稱 |
屬性含義 |
屬性可能的值 |
|
|
定義在容器的屬性 |
flex-direction |
決定主軸的方向 |
row(預設)水平，起點在左端 row-reverse水平，起點在右端 column:垂直，起點在上沿 column-reverse:垂直，起點在下沿 |
|
flex-wrap |
決定一條軸線放不下，如何換行 |
Nowrap(預設)不換行 Wrap:換行，第一行在上面 Wrap-reverse:換行，第一行在下面 |
|
|
flex-flow |
是上面兩個屬性的簡寫 |
預設值是rownowrap |
|
|
justify-content |
定義專案在主軸上的對齊方式 |
Flex-start(預設值）左對齊 Flex-end右對齊 Center居中 Space-between:兩端對齊，專案之間的間隔都相等 Space-around:每個專案之間的間隔相等，所以專案之間的間隔比專案與邊框之間的間隔大一倍 |
|
|
align-items |
定義專案在交叉軸上如何對齊 |
Flex-start交叉軸的起點對齊 Flex-end交叉軸的終點對齊 Center:交叉軸的中點對齊 Baseline：專案的第一行文字的基線對齊 Stretch（預設值）如果專案未設定高度或者設為auto，將佔滿整個容器的高度 |
|
|
align-content |
定義多跟軸線對齊方式，一條軸線該屬性不起作用 |
Flex-start:與交叉軸的起點對齊 Flex-end與交叉軸的終點對齊 Center:與交叉軸的中點對齊 Space-between:與交叉軸的兩端對齊，軸線之間的間隔平均分佈 Space-around：每根軸線之間的間隔都相等，所以軸線之間的間隔比軸線與邊框之間的間隔大一倍 |
|
|
定義在專案上的屬性 |
order |
定義專案的排列順序，數值越小，排列越靠前 |
預設0 |
|
flex-grow |
定義專案的放大比例，如果存在剩餘空間，不放大 |
預設0（如果所有專案的flex-grow屬性為1，則等分剩餘空間） |
|
|
flex-shrink |
定義專案的縮小比例 |
預設1負值對該屬性無效 |
|
|
flex-basis |
定義在分配多餘空間之前，專案佔據的主軸空間，瀏覽器根據這個屬性來計算主軸是否有多餘空間 |
預設auto,即專案本來大小 |
|
|
flex |
是上面三個的簡寫 |
預設值01auto後兩個值可選 |
|
|
align-self |
允許單個專案與其他專案不一樣的對齊方式，可覆蓋align-items屬性 |
預設值auto表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch |
解釋一下align-content屬性，當我們把容器的flex-warp的值設定為warp或者warp-reverse時，若專案不能在一根主軸上顯示，容器便會出現多根主軸。
此時便需要一個值來定義多根平行軸線的對齊方式，這個值便是align-content。
二、grid佈局
grid佈局在2010年由Microsoft提出，目前已經成為W3C候選標準，目前還不能用於生產環境,但可以通過設定瀏覽器來看到效果，在Chrome中位址列中輸入chrome://flags開啟瀏覽器實驗網路平臺功能，將experimental web platform features設定為enable，這樣我們就可以正常使用grid,如果要在專案中使用grid佈局，可以安裝css-grid-polyfill
依然用一個表格直觀的顯示grid的屬性：
|
屬性名稱 |
屬性含義 |
屬性可能的值 |
|
|
容器的屬性 |
display |
定義一個網格容器 |
Grid以塊級元素的形式顯示 Inline-grid以內聯元素的形式顯示 Subgrid父級網路容器的一個子項，行和列的大小都從父級獲取 |
|
Grid-template-columns |
網格的行數 |
定義網格的寬高，單位可以是(px,em,rem,vw,vh,百分比），也可以是網格中自由空間的份數（單位fr） 定義網格線的名稱，不是必須值，未設定以數字表示 |
|
|
Grid-template-rows |
網格的列數 |
||
|
Grid-template-areas |
定義網格區域，配合grid-area呼叫宣告好的網格區域名稱來放置對應的網格專案 |
名字 |
|
|
Grid-column-gap |
定義網格之間的間距（不包括網格專案到容器邊緣的間距） |
||
|
Grid-row-gap |
|||
|
Justify-items |
水平方向的對齊方式 |
Start內容與網格區域的左邊對齊 End右邊對齊 Center中間對齊 Stretch(預設值)代表填充整個網路區域的寬/高度 |
|
|
Align-items |
垂直方向的對齊方式 |
||
|
Justify-content |
定義網格和網格容器列軸對齊方式，和align-content相反 |
Start網格在網路容器左邊對齊 End右邊對齊 Center中間對齊 Stretch改變網路子項的容量讓其填充整個網格容器寬度 Space-around在每個網格子項中間放置均等的空間，在始末兩端只有一半大小 Space-between在始末兩端沒有空間 Space-evenly始末兩端也放置均等空間 |
|
|
Align-content |
定義網格和網格容器行軸對齊方式 |
||
|
Grid-auto-columns |
指定隱式網格 |
||
|
Grid-auto-rows |
|||
|
Grid-auto-flow |
控制自動佈局演算法如何工作 |
Row自動佈局演算法在每一行中一次填充，只有必要時才會新增新行 Column自動佈局演算法在每一列中依次填充，必要時新增新行 Dense如果更小的子項出現時嘗試在網格中填補漏洞 |
|
|
grid |
grid-template-rows，grid-template-columns，grid-template-areas，grid-auto-rows，grid-auto-columns，grid-auto-flow的合併 |
||
|
專案的屬性 |
Grid-column-start |
定義了網格專案垂直方向的開始位置網格線。 |
|
|
Grid-column-end |
定義了網格專案垂直方向的結束位置網格線。 |
||
|
Grid-row-start |
定義了網格專案水平方向的開始位置網格線。 |
||
|
Grid-row-end |
定義了網格專案水平方向的結束位置網格線。 |
||
|
Grid-column |
grid-column-start與 grid-column-end的簡寫 |
||
|
Grid-row |
grid-row-start+grid-row-end的簡寫形式。 |
||
|
Grid-area |
呼叫grid-template-areas屬性建立的模板。同時，這個屬性也可以是grid-row-startgrid-column-startgrid-row-endgrid-column-end的縮寫。 |
||
|
Justify-self |
水平方向的對齊方式 |
start代表該網格單元和網格區域的左邊對齊。 end代表該網格單元和網格區域的右邊對齊。 center代表該網格單元和網格區域的中間對齊。 stretch為預設值，代表填充整個網格區域的寬度。 |
|
|
Align-self |
垂直方向對齊方式 |