彈性佈局: 伸縮佈局 彈性盒子 flex佈局
彈性佈局是父級和子級之間的關係(父親和兒子)
父級:彈性空間
子級:彈性元素(彈性項,彈性項目),設置寬高起作用
主軸:默認水平(從左到右)
交叉軸(側軸,垂軸): 默認垂直(從上到下)
display:flex;----------開啓彈性空間：給父級設置
flex-direction:--------------彈性元素在主軸的位置分佈：
彈性佈局主軸和交叉軸的方向:
row:默認值,主軸是水平,左邊開始,右邊結束(可以看成是左浮動)
row-reverse:主軸是水平,左邊結束,右邊開始(可以看成是右浮動)
column: 主軸和交叉軸對調,主軸上邊開始,下邊結束,交叉軸,左邊開始,右邊結束
(可以看成元素垂直排列)
column-reverse: 主軸和交叉軸對調,主軸下邊開始,上邊結束,交叉軸,左邊開始,右邊結束
justify-content：--------------彈性元素在主軸的位置分佈
flex-start(默認值):彈性元素在主軸的開始位置(居左)
flex-end: 彈性元素在主軸的結束位置(居右)
center: 彈性元素在主軸的中間位置(居中)
space-around: 空間包含元素
space-between: 元素包含空間
space-evenly: 空間包含元素(左右相等的間距)
flex-wrap:---------------彈性元素是否換行
nowrap:不換行(默認值),當父元素小於整體彈性元素的寬度時,彈性元素會進行壓縮
wrap:換行,當父元素小於整體彈性元素的寬度時,彈性元素會換行(換行之間有相等距離的空間)
wrap-reverse:反向換行,彈性元素垂直方向反向排列(換行之間有相等距離的空間)
align-content:---------------彈性元素在交叉軸的位置分佈(換行)
stretch(默認值):1.換行之間有相等距離的空間(彈性元素設置高度的情況下)
2.換行後,彈性元素的高度會進行等分((彈性元素不設置高度的情況下))
flex-start:彈性元素整體居交叉軸的開始(整體居上,行之間沒有間距)
flex-end:彈性元素整體居交叉軸的結束(整體居下,行之間沒有間距)
center:彈性元素整體居交叉軸的中間(整體居中,行之間沒有間距)
space-around:彈性元素在交叉軸,空間包含元素
space-evenly:彈性元素在交叉軸,空間包含元素(相等的間距)
space-between:彈性元素在交叉軸,元素包含空間
align-items:-------------------彈性元素在交叉軸的位置分佈(不換行的)
stretch(默認值):在彈性元素不設置高度時,高度充滿整個父元素
flex-start:彈性元素整體居交叉軸的開始
flex-end:彈性元素整體居交叉軸的結束
center:彈性元素整體居交叉軸的中間
flex-flow:--------------彈性佈局主軸交叉軸方向和是否換行的複合屬性：如 flex-flow: column wrap;
align-self:---------------彈性元素自身在交叉軸中的位置分佈(不換行)
flex-start:彈性元素整體居交叉軸的開始
flex-end:彈性元素整體居交叉軸的結束
center:彈性元素整體居交叉軸的中間
flow-grow:-----------------彈性元素在父元素中所佔的寬度的份數
flex-shrink:--------------壓縮率
超出的寬度像素值/壓縮總份數=1份壓縮的像素值 200px/6 = 33.33px
壓縮的像素值 = 1份壓縮的像素值*份數 66.66px = 33.33px*2
壓縮後自身的寬度 = 自身的寬度-壓縮的像素值; 200px-66.66px = 133.33px
order:-------------彈性元素的排序:
按照文檔流的順序排序: 先是沒加order的，後是加order的，加了order按編號順序排序