CSS3弹性盒模型之box-orient & box-direction

岁酱吖の 提交于 2020-03-18 06:11:53

Css3引入了新的盒模型——弹性盒模型,其实上一篇文章已经讲到了一个box-flex,今天来讲讲另外的两个弹性盒模型属性box-orient 和 box-direction。

1、box-origent: 水平或垂直分布。

box-origent有两个值:horizional(水平)和vertical(垂直),意思就是元素的排列方式!

css代码如下:

body {
display: -webkit-box;

-webkit-box-orient: horizional;

}

水平排列方式如下:

body {
display: -webkit-box;

-webkit-box-orient: vertical;

}

垂直排列方式如下:

 

2、box-direction:反向分布

box-direction也有两个值 normal(正常)和reverse(反向),当然如果使用的时候当然一般都是为了reverse的!该属性的作用就是把本来 由1-2-3排列的元素倒过来变成:3-2-1


注意:无论是box-orient还是box-direction都需是在父元素中定义而决定子元素的排列的,而且他们起作用的前提是display:box 必须将display的值设置成box,否则是不会生效的,还有不同浏览器必须加上前缀(-webkit-、-moz-、-o-、-ms- 等等)。

 

3、除了box-direction能够实现反向分布外,还有一个更具体的公布方法,是定义在每个子元素的属性,它甚至可以决定任何的排列顺序,1-3-2,3-1-2...都可以,那就是 box-ordinal-group ,

它的值是从1开始的正整数,值越小便排得超前面!

css代码如下:

.box1{-webkit-box-ordinal-group:1}

.box2{-webkit-box-ordinal-group:3}

.box3{-webkit-box-ordinal-group:2}

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!