二、兼容性方面?
? /*父元素-横向排列（主轴）*/
? ? ?
? display:box; ?（伸缩盒最老版本）
? display:-webkit-box; ?/* iOS 6-,Safari 3.1-6 */
? display:-webkit-flex; /* Chrome */
? display:-moz-box; ? ? /* Firefox 19 */
? display:-ms-flexbox; ??
? display:flex; ?/*flex容器*/
?
/*方向*/
? -webkit-flex-direction: row;
? -moz-flex-direction: row;
? -ms-flex-direction: row;
? -o-flex-direction: row;?
? flex-direction:row; ? ?【新版本语法】
?
/*父元素-水平居中（主轴是横向才生效）*/【新版本语法】
? -webkit-justify-content: center;
? -moz-justify-content: center;
? -ms-justify-content: center;
? -o-justify-content: center;
? justify-content: center;
?
/*子元素-垂直居中（在侧轴、纵轴上）*/【新版本语法】
?-webkit-align-items:center;
?-moz-align-items:center;
?-ms-align-items:center;
?-o-align-items:center;
?align-items:center;
?
/*父元素-横向换行 */
? -webkit-flex-wrap: wrap;
? -moz-flex-wrap: wrap;
? -ms-flex-wrap: wrap;
? -o-flex-wrap: wrap;
? flex-wrap:wrap;
?
/* 子元素—平分比例 */?
?-prefix-box-flex: 1; /* old spec webkit,moz */
?-webkit-box-flex: 1; ? ? ?/* OLD - iOS 6-,Safari 3.1-6 */
?-webkit-flex: 1; ? ? ? ? ?/* Chrome */
?-moz-box-flex: 1; ? ? ? ? /* Firefox 19- */
?-ms-flex: 1; ? ? ? ? ? ? ?/* IE 10 */
?width:20%;
?flex: 1; ? ? ? ? ? ? ? ? ?/* NEW,?Opera 12.1,Firefox 20+ */
?flex: 2;
?
不写flex数值默认不可以伸缩。
?
/* 子元素-用于改变源文档顺序显示 */
?-prefix-box-ordinal-group: 1; /* old spec; must be positive */
?-webkit-box-ordinal-group: 2; ? ?
?-moz-box-ordinal-group: 2; ? ? ??
?-ms-flex-order: 2; ? ? ? ? ? ? ??
?-webkit-order: 2; ? ? ? ? ? ? ? ?
?order: 2; ? ? ? ? ? ? ? ? ? ? ? ?
?order: 3;
?
【老版本语法】
/*居中 */
box-pack:center; ?//水平
box-align:center; //垂直
-webkit-box-pack:center;
-webkit-box-align:center;
-moz-box-pack:center;
-moz-box-align:center;
-ms-flex-pack:center;
-ms-flex-align:center;
/*子元素方向 */ ? -webkit-box-orient:horizontal; ? -moz-box-orient:horizontal; ? -ms-box-orient:horizontal;? -o-box-orient:horizontal;? box-orient:horizontal;
