想做自适应的流体布局 box很有用 。 还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。

有以下属性：box-orient   子元素排列方式(水平还是竖直)  vertical  horizontal   inline-axis   block-axis

box-flex       子元素之间比例

box-align     子元素垂直对齐方式   start end center baseline stretch

box-pack     子元素水平对齐方式   start  end  center  justify

box-direction    normal   reverse

1.   box-orient    horizontal 和  inline-axis  是水平排列     vertical  和  block-axis 是竖直排列

2.   box-flex       子元素之间比例   如果有一个像固定宽度  直接写像素  比例为0即可

3.   box-align      normal  按正常顺序显示    reverse  反转顺序

4.   box-align      start   居顶对齐   end  居底对齐   center 居中对齐  stretch  拉伸到父容器等高

5.   box-pack      start   居左对齐   end  居右对齐   center 居中对齐   justify   水平等分父容器宽度（firefox与opera暂时不支持，只有safari、chrome支持）

上代码 ：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

       .box{

        display: box;

        display: -webkit-box;

        display: -moz-box;

        display: -o-box;

        box-orient:horizontal;

        -webkit-box-orient:horizontal;

        -moz-box-orient:horizontal;

        -o-box-orient:horizontal;

        padding: 10px;

        padding-right: 0px;

        width:100%;

        height:300px;

        background: green;

       }

       .item{

        box-flex:1;

        -webkit-box-flex:1;

        -moz-box-flex:1;

        -o-box-flex:1;

        height:100%;

        margin-right:10px;

        background: grey;

       }

       .item:first-of-type{

        box-flex:0;

        -webkit-box-flex:0;

        -moz-box-flex:0;

        -o-box-flex:0;

        width:200px;

       }

       .item:nth-of-type(2){

        box-flex:2;

        -webkit-box-flex:2;

        -moz-box-flex:2;

        -o-box-flex:2;

       }

    </style>

</head>

<body>

    <div class = "box">

        <div class = "item">column1</div>

        <div class = "item">column2</div>

        <div class = "item">column3</div>

    </div>

</body>

css3 display:box的更多相关文章

  1. 转: css3: display:box详解

    示例见:  css3: flexbox (BTW: blog不能包含iframe script真不方便啊~~) display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决 ...

  2. css3 display:box 属性

    先看例子: .ub{ display: -webkit-box !important; display: box !important; position:relative;}.ub-f1{ posi ...

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

    CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...

  4. CSS3盒模型display:box详解

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...

  5. CSS3弹性盒模型 display:box

    刚开始做网页时就有一个困惑,为什么display:block只能垂直排列,如果要水平排列就要使用float:left等方式.这种方法最难受的当然是当子元素的数量改变时,需要去修改子元素的宽度使重新适应 ...

  6. CSS3盒模型display:box简述

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. box-f ...

  7. [转]CSS3盒模型display:box详解

    时间:2014-02-25来源:网络作者:未知编辑:RGB display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布 ...

  8. CSS3盒模型display:box;box-flex:3;

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. CSS3盒模型display初探（display:box/display:flex）

    可以实现水平等分切割等.日后在研究,做个记录. 首先要声明:display:box,像谷歌浏览器要加前缀识别码:display:-webkit-box; 然后才开始使用其属性,同时也是要带上前缀识别码 ...

随机推荐

  1. 网易云课堂_C语言程序设计进阶_第5周：链表

    5.1可变数组 5.2链表 5.1可变数组 Resizable Array Think about a set of functions that provide a mechanism of res ...

  2. phoenegap3.5 采坑

    上周5晚上在家看Node.js视频的时候,老大来一条短信让研究下 phoengap打包一个web网站. 遂 陷入了phonegap的深渊中. phoengap很早开始使用 cli模式安装开发环境 ,借 ...

  3. Page.ClientScript.RegisterStartupScript 与 Page.ClientScript.RegisterClientScriptBlock 之间的区别

    Page.ClientScript.RegisterClientScriptBlock 在页面紧跟<form>之后,整个页面未完全加载完成. Page.ClientScript.Regis ...

  4. win7(32 bit) 环境下点击打印预览报错解决办法

      如题,报错截图如下   :     解决办法如下: 1.关闭系统数据执行保护.具体操作: 在win7 系统命令行中执行如下命令: bcdedit.exe /set {current} nx Alw ...

  5. 如何创建一个简单的struts2程序

    如何创建一个简单的Struts2程序 “计应134(实验班) 凌豪” 1.创建一个新的Web项目test(File->new->Web Project) 2.Struts2框架的核心配置文 ...

  6. PCB外形加工

  7. Linux中环境变量到底写在哪个文件中？解析login shell 和 no-login shell

    login shell:取得bash 时需要完整的登入流程,就称为login shell.举例来说,同tty1~tty6登入时, 需要输入用户名和密码,此时取得的bash就称为login shell ...

  8. Git库文件的状态

    git库所在的文件夹(即.git所在的文件夹)中的文件的状态: (1)untracked:未跟踪,此文件在文件夹中,但并没有加入git库,不参与版本控制. 通过”git add”,”git commi ...

  9. ubuntu之iptables

    1.更新iptables并立即生效: a.保存当前设置:iptables-save > /etc/iptables.up.rules b.修改iptables规则: 例如: -I INPUT - ...

  10. java final 关键字醍醐灌顶

    醍醐灌顶: final 关键字,它可以修饰数据 .方法.类. 可能有些同学傻傻分不清出,这里可以快速弄懂final; final 实例域: 可以将实例域定义为final,构建对象时必须初始化这样的域, ...