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}

时间: 07-16

CSS3弹性盒模型之box-orient & box-direction的相关文章

CSS3弹性盒模型flexbox完整版教程

文章目录 基础知识 属性介绍 display: flex | inline-flex; (适用于父类容器元素上) 请注意: flex-direction (适用于父类容器的元素上) flex-wrap (适用于父类容器上) flex-flow (适用于父类容器上) justify-content (适用于父类容器上) align-items (适用于父类容器上) align-content (适用于父类容器上) order (适用于弹性盒模型容器子元素) flex-grow (适用于弹性盒模型容

CSS3弹性盒模型,Flex布局教程

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. 尽管目前css3在PC端上的兼容性还不是那么完美,但是在移动端已基本实现兼容. 网络上有很多关于flex布局很好的教程.总结的也很完美,我就直接收藏了,以备查询 详解css3弹性盒模型(Flexbox) 移动端开发小记 – Flexbox

CSS3弹性盒模型

旧式的弹性盒子 1.在拥有盒子的盒子上加display:box; 或 inline-box 开启弹性盒模型 2.box-flex 分配空间,假如容器有a份,box-flex:2,那就占a分之2 3.分布方向  水平box-orient: horizontal;  垂直 box-orient:vertical; 4.定义显示顺序:box-ordinal-group 实例 <!DOCTYPE html> <html lang="zh"> <head> &

CSS3弹性盒模型之Flexbox是布局模块box-sizing &amp; box-orient &amp; box-direction &amp; box-ordinal-group

css3 box-sizing属性 box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box. content-box,border和padding不计算入width之内 padding-box,border-box,border和padding计算入width之内 ie8+浏览器支持content-box和border-box: ff则支持全部三个值. 使用时: -webkit-box-sizing: 100px; //

CSS3弹性盒模型之box-flex

对于之前讲过的box-sizing属性,对于页面布局很有用,但是突然发现它依然存在一些问题,前面例子中不会存在问题,不代表它没有问题.如果元素的个数整除100%的时候呢,比较3个元素,那么第一个盒子的宽度就会是33.3333333%,很显然,无论如何都是除不尽的,也就是说不可能平均分配.这显然是不完美的!是否有更完美的解决方案呢,答案是——有,它就是 box-flex. box-flex是css3新添加的盒子模型属性,它的出现打破了我们经常使用的浮动布局,实现垂直等高.水平均分.按比例划分.它使

深入理解 CSS3 弹性盒布局模型

Web 应用的样式设计中,布局是非常重要的一部分.布局用来确定页面上不同组件和元素的尺寸和位置.随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率.响应式用户界面设计中最重要的一环就是布局.需要根据窗口尺寸来调整布局,从而改变组件的尺寸和位置,以达到最佳的显示效果.这也使得布局的逻辑变得更加复杂.本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).弹性盒模型可以用简单的方式满足很多常见的复杂的布局需求.它的优势在于开发人员只是声明布局应该

详细介绍弹性盒模型(display:flex)

弹性盒模型,即Flexbox,是css3中的新特性,其实弹性盒模型的原身是dispaly:box:这里,我们暂时不考虑旧的,我们只看新的. 为容器指定弹性盒子,只需在父元素(也就是容器)中设置:display:flex:(注意,webkit内核的需要加webkit前缀,行内元素设置弹性盒子的话,设置display:inline-flex:而且,设置了弹性盒子,子元素的float,clear,vertical属性都将失效). 弹性盒子默认有两条轴,横轴和纵轴,默认横轴为主轴(默认自左向右)纵轴为辅

CSS3.0盒模型display:-webkit-box;的使用

box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.目前box-flex属性还没有得到firefox.Opera.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz).opera(-0).chrome/safari(-webkit). 一.box-flex属性 box-flex主要让子容器针对父容器的宽度按一定规则进行划分 HTML代码 <article

css3弹性盒子模型之box-flex

css3弹性盒子模型之box-flex 浏览器支持 目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chrome 支持替代的 -webkit-box-flex 属 box-flex是css3新添加的盒子模型属性),它的出现打破了我们经常使用的浮动布局,实现垂直等高.水平均分.按比例划分.但是它有一定的局限性,在firefox.chrome这浏览器下需要使用它们的私有属性来定义:firefox(-moz)