Flex布局的優勢
傳統布局：兼容性好，布局繁瑣，局限性在移動端不能很好布局
Flex布局：簡單，操作方便，兼容性差
Pc采用傳統布局，移動端或者不考慮兼容的pc可采用flex布局
flex布局的要點
/* 使用flex布局必須要給父級盒子開啟flex布局模式 */
display: flex;
Flex布局原理就是：
給父盒子添加flex屬性（display:flex;），來控制子盒子的位置排列方式從而實現flex布局，父級盒子我們稱之為容器，子級盒子我們稱之為項目；
當我們為父盒子設為 flex 布局以后，子元素的 float、clear 和 vertical-align 屬性將失效。
Flex布局又叫伸縮布局、彈性布局、伸縮盒布局、彈性盒布局、flex布局；
flex布局中的子元素可以橫向排列也可以縱向排列；
Flex布局父項常見屬性
display:flex;-開啟flex布局
給父級設置display:flex;表示給盒自開啟了flex布局；
flex-direction--flex設置主軸方向
Flex布局中默認的主軸是row，x軸，默認值是從左到右；
如果想改變主軸方向可通過設置flex-direction來改變；
flex-direction:column;將主軸改為y軸，縱軸，從上到下；
flex-direction:row; 將主軸改為x軸，橫軸，默認值從左到右；
flex-direction:row- reverse;主軸為x軸，並且翻轉，從右到左翻轉排列；
flex-direction:column- reverse;主軸為y軸，並且翻轉，從下到上翻轉排列 ；
/* 默認的主軸是X軸也可以取值為row */
flex-direction: row;
/* 設置主軸的排列為Y軸 */
flex-direction: column;
justify-content設置主軸子元素排列
通過justify-content能夠設置主軸子元素排列形式,但是注意使用這個屬性之前一定要確定好主軸是哪個;
值為flex-start 默認值（常用）
所有子元素在主軸頭部開始顯示，如果是X軸，則從左到右，如過是Y軸，則從上到下；
justify-content: flex-start;
值為flex-end
所有子元素在主軸尾部開始顯示，如果是X軸，則所有元素靠右顯示，如果是Y軸，則所有元素靠下顯示；
justify-content: flex-end;
值為center （常用）
所有子元素在主軸居中對齊
justify-content: center;
值為space-around
所有子元素平分剩余空間（指的就是所以的子級盒子和外邊距除外父級盒子剩下的大小），
每一個子級盒子左右的距離都是一致的然后加起來；
justify-content: space-around;
值為space-between （用得到）
所有子元素中，先兩邊兩個元素貼邊，剩余的元素平分剩余空間（常用）;
justify-content: space-between;
值為space-evenly （用的到）
所有子元素之間的距離都一致
justify-content: space-evenly;
flex-wrap子元素是否換行
開啟flex布局后默認為不換行，默認情況下項目（子元素）都排在一條線上（軸線），flex-wrap屬性定義，默認是不換行的flex-wrap:nowrap;，如果裝不下就將子元素的大小寬度進行縮小。
如果想要換行效果設置flex-wrap：wrap；
/* 設置子元素換行 */
flex-wrap: wrap;
align-items設置單行的側軸子元素排列
align-items的值為flex-start 表示從頭開始；
align-items: flex-start;
align-items的值為flex-end 表示從結尾開始；
align-items: flex-end;
align-items的值為center 表示居中顯示（居中）；
align-items: center;
align-items的值為stretch
在子元素沒有設置固定高度的情況下會將子元素拉伸的和父級盒子一樣高；
align-content設置多行的側軸子元素排列
align-content:flex-start;（常用）
側軸的排列從頭部開始排列；
align-content: flex-start;
align-content:flex-end;
側軸的排列從尾部開始排列；
align-content: flex-end;
align-content:center; （常用）
側軸的排列從中間排列顯示；
align-content: center;}
align-content:space-around;
子元素在側軸平分剩余空間；
align-content:space-between;
子元素兩頭的元素先對其在兩頭，剩余的子元素再去平分剩余的空間；
align-content: space-between;
align-content:stretch;
子元素平分父元素的高度空間，子元素不能設置固定得到高度；
align-content: stretch;
align-item和align-content的區別：
單行找 align-items
多行找 align-content
flex-flow
就是flex-direction和flex-wrap的合寫
如果主軸是X軸：
flex-direction:row; 換行 flex-wrap:wrap; ======= flex-flow:row wrap;
如果主軸是Y軸：
flex-direction:column; 換行 flex-wrap:wrap; ======= flex-flow: column wrap;
/* flex-direction: row;
flex-wrap: wrap; */
flex-flow: row wrap;
Flex布局常用屬性總結（大家可以作為復習的參照）
display：flex; 設置給父級，開啟flex布局
flex-direction 設置主軸方向
justify-content 設置主軸上子元素的排列方式
flex-wrap 設置子元素是否換行，默認是不換行，子元素會進行寬度縮小；
align-content 設置多行子元素在側軸上的排列方式；
align-items 設置單行子元素在側軸上的排列方式；
flex-flow 主軸設置flex-direction 和子元素是否換行flex-wrap的復合寫法；
flex布局子項常見屬性
子項flex屬性使用（常用）
我們用了display:flex;布局以后，子級項目元素我們可以使用flex:number;設置盒子占有的比例，將父級剩余空間按照占比分配給各個子盒子；
盒子所占比例的計算：當前盒子的flex數值=所有flex的總和；
取值可以為一個數字
取值為數字表示當前子級盒子占有父級盒子的份數；
取值可以為百分比
取值也可以為百分比表示子級占有父級盒子的百分比的大小；
align-self
控制子項自己在側軸上的排列方式：允許單個的項目和其他的子項目不一樣的對齊方式，可覆蓋align-items屬性，默認值是auto，表示繼承父元素的align-items屬性；
align-self: flex-end;
order屬性
定義項目的排列順序：默認值為0，可以調節元素在父級盒子區域內的先后排列順序；
order: -1;
Css3背景線性漸變
由於漸變的兼容性，在書寫漸變屬性的時候必須添加瀏覽器的私有前綴，移動端：-webkit-；
線性漸變語法：background:linear-gradient(起始方向，顏色1，顏色2，顏色3……)
起始方位可以是方位名詞或者度數，如果不寫起始方向默認就是top；
從左邊開始紅色和綠色漸變：background:-webkit-linear-gradient(left,red,green)；
從45度開始紅色和綠色漸變：background:-webkit-linear-gradient(45deg,red,green)；
background: -webkit-linear-gradient(top left, red, green);
background: -webkit-linear-gradient(top, red, green);
background: -webkit-linear-gradient(45deg, red, green, gold, pink);
常見flex布局思路
第一步：給最外層的父級盒子開啟flex布局實現整體布局；
第二步：設置默認的主軸x為y軸；flex-direction:column; 設置主軸為Y軸
第三步：設置子元素在側軸的排列居中：align-items:center;