详解css display:box 新特性

1、display:box;

　　在元素上设定该特性，可以使其子代排序在同1水平上，相近display:inline-block;。

2、可在其子代设定以下特性

　　前提条件：应用以下特性，务必在父代设定display:box;

　　1.box-flex:number;

　　　　1）占父级元素宽度的number份

　　　　2）若子元素设定固定不动宽度，则该子元素运用固定不动宽度，别的未设定固定不动宽度的字元素将余下的父级宽度（父级-已设定固定不动宽度的子代元素的总宽度按　number占份数

　　　　3）若子元素有margin值，则按余下（父级宽度-子代固定不动总宽度-总margin值）宽度占number份

　　2.box-orient:horizontal/vertical

　　　　在父级上设定该特性，则子代按水平排序或垂直排序。

　　　　注：全部流行访问器不适用该特性，务必再加前缀。

　　　　1）horizontal  水平排序，子代总width=父级width。若父级固定不动宽度，则子代设定的width失效，子代会撑满父级宽度。

　　　　2）vertical  竖直排序，子代总height=父级height。若父级固定不动高宽比，则子代设定的height失效，子代会撑满父级高宽比。

　　3.box-direction:normal/reverse

　　　　在父级上设定该特性，确定子代的排序次序。

　　　　1）normal  默认设置值，子代按html次序排序

　　　　2）reverse  反序

　　4.box-align:start/end/center/stretch

　　　　在父级设定，子代的竖直对齐方法。

　　　　1）start  竖直顶部对齐

　　　　2）end 竖直底部对齐

　　　　3）center 竖直垂直居中对齐

　　　　4）stretch 拉伸子代的高宽比，与父级设定的高宽比1致。子代height失效。

　　5.box-pack:start/end/center

　　　　在父级设定，子代的水平对齐方法。

　　　　1）start  水平左对齐

　　　　2）end  水平右对齐

　　　　3）center  水平垂直居中对齐
 

总结

以上所述是网编给大伙儿详细介绍的css display:box 新特性，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！