css3弹性盒模型

弹性盒模型:

注意在试用的时候,父元素必须要加 : display:-webkit-box 或 display:-webkit-inline-box;

展示效果如图:



Box-orient:定义盒模型的布局方向。

Horizontal:水平方向

vertical:垂直方向。


-webkit-box-orient:vertical; 则垂直显示。


反序展示代码


box-direction 元素排列顺序:

normal:正序   Reverse :反序默认是正序展示,反序展示的效果如图:


反序展示效果图


box-ordinal-group 设置元素的具体位置。


设置元素的具体位置

展示效果如图:


box-flex 定义盒子的弹性空间

子元素的尺寸 = 盒子的尺寸*子元素的box-flex属性值/所有子元素的box-flex属性值的和。

box-pack 对盒子富裕的空间进行管理。

star :所有子元素在盒子左侧显示,富裕空间在右侧

end :所有子元素在盒子右侧显示,富裕空间在左侧。

center:所有子元素居中。

justify:富裕空间在元素之间平均分配。


平均分配的效果代码:

效果:


在垂直方向上对元素进行管理:

box-align:

star:所有子元素在居顶

end:所有子元素居底

center:所有子元素居中。



最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容