想做自适应的流体布局 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. javascript编辑器预览模式解密

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. python 【第三篇】：函数及参数

    函数背景 在学习函数之前,一直遵循:面向过程编程: 根据业务逻辑从上到下实现功能,其往往用一长段代码来实现指定功能,开发过程中最常见的操作就是粘贴复制,也就是将之前实现的代码块复制到现需功能处,如下: ...

  3. Python之美[从菜鸟到高手]--生成器之全景分析

    yield指令,可以暂停一个函数并返回中间结果.使用该指令的函数将保存执行环境,并且在必要时恢复. 生成器比迭代器更加强大也更加复杂,需要花点功夫好好理解贯通. 看下面一段代码: def gen(): ...

  4. 使用my97datepicker控件实现日期范围选择

    注:(2014-12-05内容修改:添加运行效果) 使用my97datepicker 控件,需要对日期的范围进行控制,本人自己写了一个js完成此功能,示例为当前日期到下一周周五之间的日期可选,其他日期 ...

  5. powerdesigener 12.5注册机

    下载链接 下载链接 密码:awg9

  6. SQL server 和Oracle 序列

    1,SQL Server序列创建与使用 BEGIN IF EXISTS (SELECT * FROM sysobjects WHERE name = 'event_seq') DROP SEQUENC ...

  7. mvn command is not recognized as an internal or external command

    even though I have configured %m2_home% and %path% correctly, the command "mvn" is still n ...

  8. Java 方法调用疑问

    同一个类中同一个方法,实例化后,同时调用两次,内存分配如何?

  9. js判断微信内置浏览器

    做了一个h5页面来下载app,但如果页面是用微信扫一扫打开的,点击下载按钮下载不了app,原因是微信内置浏览器屏蔽了下载链接.所以增加了检测,如果用户是用微信浏览器打开的,则提示用户使用浏览器打开.那 ...

  10. 找出n个数中出现了奇数次的两个数

    如果是找只出现了奇数次的一个数, 那么我们从头异或一遍就可以. 那么如何找出现了奇数次的两个数呢? 首先我们还是从头异或一遍, 然后结果肯定不为0, 对于异或出来的结果, 如果这个数的某一位是1, 说 ...