（前面是大概簡介，後面爲具體實例）可參考此文章
一、flex佈局簡介
flex是flexible box（彈性佈局）的簡介，是一個一維繫統，用來爲盒狀模型提供最大的靈活性。
使用：任何容器（行內元素可設置爲display:inline-block）;
特點：空間分佈在行中進行，而非整體
二、grid佈局簡介
Gird Layout(css網格佈局)是css中最強大的佈局系統，是一個二維繫統，可以同時處理行和列，可以通過將css規則用於父元素（網格容器）和該元素的子元素（網格元素）來使用網格佈局。
使用：對父元素設置dispay：grid;grid-template-colums和grid-template-rows來設置幾行幾列，然後對子元素設置佔據幾行幾列
特點：二維網格結構，十分便於操作
基本概念：
*container：網格容器，設置display:grid就將容器變成了網格容器
*item：網格項，指網格容器中每一個子元素
*line：網格線，網格之間的分界線
*track：網格軌道，兩條相鄰的網格線之間的空間（行或列）
*cell：網格單元，每個小網格
*area：網格區域，四條網格線包圍起來的區域
*fr：在自由空間進行分配的一個單位
三、實例操作
1.flex
（1）
2.grid
（1）grid-template-columns、grid-template-rows、grid-gap -> grid -row-gap + grid-column-gap
設置屬性值爲若干個像素，即爲幾行幾列寬度、高度的網格
eg：display: grid;
grid-template-columns: 120px 120px 120px;
grid-template-rows: 50px 50px; //兩行三列高爲50排序，寬爲100px的網格
grid-gap:2px 4px; //設置格子之間間隙，是grid-column-gap和grid-row-gap的組合
//grid-template-columns：200px 1fr 1fr 2fr; //若容器寬度爲1000px，則分成四列（固定的第一列200px，和按比例分的其他三列：200、200、400）
//grid-template-columns：1fr 1fr 1fr 1fr; //等價於repeat（4,1fr）
【注】：grid中有一個隱式網格軌道，子元素超出網格數量時會有一個默認的值約束多出的子元素
可以通過設置grid-auto-rows和grid-auto-columns來定義行和列。查看詳細內容
(2)grid-column ->grid-column-start + grid-column-end 、grid-row ->grid-row-start + grid-row-end
eg:container包含其他組件（可以給網格線起名，便於使用）
.container {
display: grid;
grid-template-columns: 200px [main-start] 1fr [main-end] 200px;
grid-template-rows: 200px 200px;
grid-gap: 2px 4px;
}
.footer {
grid-column: main-start / main-end; //開始網格號/結束網格號（可爲負數，auto，span num【代表佔幾個格子】）
}
（3）grid-template-areas、grid-area
【注】：可以通過類似於畫圖的方式來部署網格
eg:
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: 50px 300px 50px;
grid-template-areas:
". h ."
"l m r"
". f .";
grid-gap: 2px 4px;
}
.header {
grid-area: h;
}
.left {
grid-area: l;
}
.right {
grid-area: r;
}
.main {
grid-area: m;
}
.footer {
grid-area: f;
}
(4)repeat 進階（auto-fit、auto-fill）
目標：在屏幕大小變化時設置格子大小隨之變化、自動填充，設置格子最小最大寬度
實現：
.container{
grid-template-columns: repeat(9, minmax(250px, 1fr)); //設置格子在250px和1fr範圍內變化，會出現滾動條
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); //作用同上，會自動換行，不會出現滾動條
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); //作用同上，會自動換行，
}
auto-fill 傾向於容納更多的列，所以如果在滿足寬度限制的前提下還有空間能容納新列，那麼它會暗中創建一些列來填充當前行。即使創建出來的列沒有任何內容，但實際上還是佔據了行的空間。
auto-fit 傾向於使用最少列數佔滿當前行空間，瀏覽器先是和 auto-fill 一樣，暗中創建一些列來填充多出來的行空間，然後坍縮（collapse）這些列以便騰出空間讓其餘列擴張。
部分參考此文章鏈接