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}

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

  1. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

  2. css3基础教程:CSS3弹性盒模型

    今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...

  3. CSS3弹性盒模型布局模块介绍

    来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...

  4. css3弹性盒模型flex快速入门与上手(align-content与align-items)

    接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...

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

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...

  6. css和css3弹性盒模型实现元素宽度(高度)自适应

    一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  7. (转)详解css3弹性盒模型(Flexbox)

    今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...

  8. css3弹性盒模型

    一.简介 css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局. 目 ...

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

    http://caibaojian.com/flexbox-guide.html 来自CSS Tricks上的一个教程,原文为:A Complete Guide to Flexbox.文中详细的介绍了 ...

随机推荐

  1. hdu 2056

    ps:    - -惭愧...是套用一个大神的计算方法来做的.....下面是代码 代码: #include "stdio.h"#include "stdlib.h&quo ...

  2. R——启程——豆瓣影评分析

    专业统计的我,自然免不了学R的,今天仔细看了这篇教程(感谢学姐的推荐@喜欢算法的女青年),就学着用R仿照着做一个,作为R语言学习的起点吧. 影评数据是用python爬的,之后会在python爬虫系列补 ...

  3. Android RecyclerView(瀑布流)水平/垂直方向分割线

     Android RecyclerView(瀑布流)水平/垂直方向分割线 Android RecyclerView不像过去的ListView那样随意的设置水平方向的分割线,如果要实现Recycle ...

  4. WCF中DataContractAttribute 类

    一.这个类的作用 使用提供的数据协定,将类型实例序列化和反序列化为 XML 流或文档.无法继承此类,(DataContractSerializer 用于序列化和反序列化在 Windows Commun ...

  5. shell命令:给当前目录里一个文件压缩一份不包含.svn文件的zip包

    filepath=$(cd ")"; pwd) packagePath="$filepath"/package zipPath="$filepath& ...

  6. TCP的分层结构

    TFTP(Trivial File Transfer Protocol,简单文件传输协议)是TCP/IP协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议,提供不复杂.开销不大的文件传输服务 ...

  7. Python编程感悟

    从今年起开始学习python,最开始是听得MIT的那门公开课,然后又看了一本入门的书籍.但是总是没有觉得python很好用.可能的原因现在想起来是:IDE始终找不到顺手的,另外R用得太舒服了- any ...

  8. eBay_GTC和Relist

    1.销售里面有个GTC 那个可以给你做累计销量,如果累计销量高,能大幅提升你的排名位置也可以用30天的摆放方法,修改里面数量,但是30天结束后relist就不知结果了关于累计销量 google搜索里面 ...

  9. 基于Spring MVC的Web应用开发(三) - Resources

    基于Spring MVC的Web应用开发(3) - Resources 上一篇介绍了在基于Spring MVC的Web项目中加入日志,本文介绍Spring MVC如何处理资源文件. 注意到本项目的we ...

  10. 创建kafkatopic和productor

    cd 到kafka 目录下 创建topic create topicbin/kafka-topics.sh --zookeeper spark1:2181,spark2:2181,spark3:218 ...