CSS3弹性盒模型之box-orient box-direction
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}
转载于:https://www.cnblogs.com/garfieldzhong/p/4655924.html
CSS3弹性盒模型之box-orient box-direction相关推荐
- CSS3弹性盒模型布局模块介绍
来源:Robert's talk 原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-i ...
- html弹性盒模型,Css3 弹性盒模型
我们来介绍一下Css3 弹性盒模型.Css3引入了新的盒子模型--弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相 ...
- (转)详解css3弹性盒模型(Flexbox)
今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...
- css3弹性盒模型兼容性,彻底弄懂css3的flex弹性盒模型
由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...
- CSS3——弹性盒模型-flex——等分布局、流式布局、圣杯布局(推荐阅读 很棒)
1.等分布局: 中间固定两边自适应: 固定两个,一个自适应 2.流式布局: 模仿float浮动布局 3.圣杯布局:(自适应布局) 先来看一下结构布局: <div class="wrap ...
- CSS3——弹性盒模型-flex——等分布局、流式布局、圣杯布局
1.等分布局: 中间固定两边自适应: 固定两个,一个自适应 2.流式布局: 模仿float浮动布局 3.圣杯布局:(自适应布局) 先来看一下结构布局: <div class="wrap ...
- css3弹性盒子模型之box-flex(--)
今天看到蓝色理想上面有一篇文章讲<css3弹性盒模型布局模块介绍>里面讲到用box-flex,突然觉得有点心慌,上次看到响应式网页设计里面 也同样讲到flex box自适应布局,而上次竟然 ...
- css3的弹性盒子模型,css3弹性盒子模型——回顾。
1.box-flex属性规定框的子元素是否可伸缩其尺寸. 父元素必须要声明display:box;子元素才可以用box-flex. 语法:box-flex:value; 示例: .test_box { ...
- 前端笔记之移动端响应式(中)视口百分比布局弹性盒模型remfillpage
一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...
最新文章
- ansys的kbc_ansys求解过程
- java脚本_写一个在线Java脚本执行器
- python封装一个效率极高的 批量更新、插入合一的工具
- 德力西电气签约永洪科技,数字化赋能电气制造新征程
- boost::msm::mpl_graph::incidence_list_graph相关的测试程序
- 搜索引擎蜘蛛爬虫原理
- office2010 启动man_Office2010打开很慢怎么回事如何解决 Office2010无法安装怎么解决办法...
- python自己创建模块引用失败_详解Python import方法引入模块的实例 Python怎么import自己写的模块...
- 选择排序详解(Java实现)
- aspose.words生成pdf字体乱码为方框
- 用css和js分别实现三级导航菜单
- adb安装apk到智能TV上
- 氪金玩家逸仙电商的高端困境
- 计算机函数sumif实例,「稻客说函数」SUMIF函数实例详解
- BAT程序员轻轻松松拿20k?学会这些涨薪秘籍你也行!
- 2023年全国最新二级建造师精选真题及答案56
- 解读如何打造支撑万亿规模的K8s集群?
- Django实现单点登录(SSO)
- 要点回顾|2020PGConf.Asia大会精彩落幕,一文带您要点回顾
- 正确设定idea的java的jre环境和jdk