/*一拆吆、新版彈性盒模型*/
/*以下都寫在父級(jí)元素上*/
display: flex;
/*設(shè)置主軸方向?yàn)樗椒较?/
flex-direction: row;
/*設(shè)置主軸方向?yàn)榇怪狈较?/
flex-direction: column;
/*設(shè)置主軸方向?yàn)樗酱雌希嘏帕袨榉葱?/
flex-direction: row-reverse;
/*設(shè)置主軸方向?yàn)榇怪鼻范嘏帕袨榉葱?/
flex-direction: column-reverse;
/* 1. 主軸方向富远岵空間管理 */
/*元素在主軸開始位置纸镊，富员蝗ィ空間在主軸的結(jié)束位置*/
justify-content: flex-start; ?
/*元素在主軸結(jié)束位置，富裕空間在主軸的開始位置*/
justify-content: flex-end;
/*元素在主軸中間县恕，富远空間在主軸的兩側(cè)*/
justify-content: center;
/*富裕空間平均分配在每?jī)蓚€(gè)元素之間*/
justify-content: space-between;
/*富灾抑颍空間平均分配在每個(gè)元素兩側(cè)*/
justify-content: space-around;
/* 2. 側(cè)軸方向富允籼幔空間管理 */
/*元素在側(cè)軸開始位置，富悦朗空間在側(cè)軸的結(jié)束位置*/
align-items: flex-start;
/*元素在側(cè)軸結(jié)束位置垒拢，富裕空間在側(cè)軸的開始位置*/
align-items: flex-end;
/*元素在側(cè)軸中間火惊，富郧罄啵空間在側(cè)軸的兩側(cè)*/
align-items: center;
/*根據(jù)側(cè)軸方向上文字的基線對(duì)齊*/
align-items: baseline;
/*以下都寫在子級(jí)元素上*/
/*1. 定義盒子的彈性空間*/
/*
計(jì)算公式： ?
子元素的尺寸 = 盒子的尺寸 * 子元素的box-flex屬性值 / 所有子元素的box-flex屬性值的和
*/
flex-grow: 1;
/*2. 設(shè)置元素的具體位置*/
/*數(shù)值越小越靠前，可以接受0 或者 負(fù)值*/
order: 1;
/*二屹耐、舊版彈性盒模型*/
/*以下都寫在父級(jí)元素上*/
display: -webkit-box;
/*設(shè)置主軸方向?yàn)樗椒较?/
-webkit-box-orient: horizontal;
/*設(shè)置主軸方向?yàn)榇怪狈较?/
-webkit-box-orient: vertical;
/*元素在主軸上排列為反序*/
-webkit-box-direction: reverse;
/*元素在主軸上排列為正序*/
-webkit-box-direction: normal;
/* 1. 主軸方向富允空間管理 */
/*元素在主軸開始位置，富曰塘耄空間在主軸的結(jié)束位置*/
-webkit-box-pack: start;
/*元素在主軸結(jié)束位置寿弱，富裕空間在主軸的開始位置*/
-webkit-box-pack: end;
/*元素在主軸中間按灶，富灾⒏铮空間在主軸的兩側(cè)*/
-webkit-box-pack: center;
/*富裕空間平均分配在每?jī)蓚€(gè)元素之間*/
-webkit-box-pack: justify;
/* 2. 側(cè)軸方向富匝炫裕空間管理 */
/*元素在側(cè)軸開始位置噪矛，富裕空間在側(cè)軸的結(jié)束位置*/
-webkit-box-align: start;
/*元素在側(cè)軸結(jié)束位置铺罢，富酝Оぃ空間在側(cè)軸的開始位置*/
-webkit-box-align: end;
/*元素在側(cè)軸中間，富跃伦福空間在側(cè)軸的兩側(cè)*/
-webkit-box-align: center;
/*以下都寫在子級(jí)元素上*/
/*1. 定義盒子的彈性空間*/
-webkit-box-flex: 1;
/*2. 設(shè)置元素的具體位置*/
/*數(shù)值越小越靠前缩滨，最小值默認(rèn)處理為1*/
-webkit-box-ordinal-group: 1;
