flex佈局與gird佈局
grid和flex區別是什麼？
Flexbox 是一維佈局系統，適合做區域性佈局，比如導航欄元件。
Grid 是二維佈局系統，通常用於整個頁面的規劃。flex佈局和grid佈局是現在的主流的兩種佈局方式。
二者從應用場景來說並不衝突。雖然 Flexbox 也可以用於大的頁面佈局，但是沒有 Grid 強大和靈活。二者結合使用更加輕鬆。
flex 佈局和 Grid 佈局有實質的區別，那就是 flex 佈局是一維佈局，Grid 佈局是二維佈局。flex 佈局一次只能處理一個維度上的元素佈局，一行或者一列。Grid 佈局是將容器劃分成了“行”和“列”，產生了一個個的網格，我們可以將網格元素放在與這些行和列相關的位置上，從而達到我們佈局的目的。
對Flex佈局的理解及其使用場景
簡單來說： flex佈局是CSS3新增的一種佈局方式，可以通過將一個元素的display屬性值設定為flex從而使它成為一個flex容器，它的所有子元素都會成為它的專案。一個容器預設有兩條軸：一個是水平的主軸，一個是與主軸垂直的交叉軸。可以使用flex-direction來指定主軸的方向。可以使用justify-content來指定元素在主軸上的排列方式，使用align-items來指定元素在交叉軸上的排列方式。還可以使用flex-wrap來規定當一行排列不下時的換行方式。對於容器中的專案，可以使用order屬性來指定專案的排列順序，還可以使用flex-grow來指定當排列空間有剩餘的時候，專案的放大比例，還可以使用flex-shrink來指定當排列空間不足時，專案的縮小比例。
以下6個屬性設定在容器上：
flex-direction屬性決定主軸的方向（即專案的排列方向）。
flex-wrap屬性定義，如果一條軸線排不下，如何換行。
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
justify-content屬性定義了專案在主軸上的對齊方式。
align-items屬性定義專案在交叉軸上如何對齊。
align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
以下6個屬性設定在專案上：
order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。
flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。
flex屬性是flex-grow，flex-shrink和flex-basis的簡寫，預設值為0 1 auto。
align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
Grid 佈局即網格佈局，是一種新的 CSS 佈局模型，比較擅長將一個頁面劃分為幾個主要區域，以及定義這些區域的大小、位置、層次等關係。號稱是最強大的的 CSS 佈局方案，是目前唯一一種 CSS 二維佈局。利用 Grid 佈局。
flex佈局
.div {
display：flex；
}
justify-content 設定行內位置
align-items 單行位置
align-content多行位置
flex-wrap：warp 換行
flex-direction 決定行排還是列排 預設行排
background：-webkit-linear-gradient（ color，color）從什麼顏色漸變到什麼顏色
div:nth-child（1）第一個塊
div:nth-child（2）第二個塊
gird佈局關於網格狀分佈
定義父盒子display:grid即可，小盒子就能成網格分佈
.grid {
display：grid；
grid-template-colums：100px 100px 100px；
}
.grid {
display：grid；
grid-template-colums：1fr 1fr 1fr；
}
fr是grid專用單位
.grid {
display：grid；
grid-template-colums：1fr 2fr 1fr；
}
.grid {
display：grid；
grid-template-colums：1fr 2fr 1fr；
row-gap：24px；
column-gap：24px；設定行間距列間距
}
grid-temple-areas