想做自适应的流体布局 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++_课时30运算符重载——基本规则_课时31运算符重载——原型_课时32运算符重载——赋值_课时33运算符重载——类型转换

    区分初始化,赋值 #include <iostream> using namespace std; class Fi { public: Fi() {}//1构造函数 }; class F ...

  2. opencv 中cvZero（）的使用

    cvZero(CvArr* ar); // 是让矩阵的值都为0,有初始化的作用, Eg:   IplImage img=cvCreateImage(cvSize(640,480),IPL_DEPTH_ ...

  3. iOS_词典阵列 按key分组和排序

    // // main.m // SortGroup // // Created by beyond on 14-10-26. // Copyright (c) 2014年 beyond.com All ...

  4. java读取TXT文件的方法

    java读取txt文件内容.可以作如下理解: 首先获得一个文件句柄.File file = new File(); file即为文件句柄.两人之间连通电话网络了.接下来可以开始打电话了. 通过这条线路 ...

  5. jsoup UnsupportedMimeTypeExceptio

    Exception in thread "main" <strong><span style="font-size:18px;">org ...

  6. 优质UI的7条准则（一）

    本文原文来自于 Medium:https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda ...

  7. 在centos6.5下yum仓库的创建

    第一步:打开虚拟机,装入光盘镜像,选择为已连接 第二步: df -h mount umount /dev/sr0 mkdir /centos mount /dev/sr0 /centos mkdir ...

  8. 数据库值N'string'

    加上 N 代表存入数据库时以 Unicode 格式存储.N'string' 表示string是个Unicode字符串 Unicode 字符串的格式与普通字符串相似,但它前面有一个 N 标识符(N 代表 ...

  9. c# session总结

    C# 中对 Session 的“(string)”.“.ToString()”与“Convert.ToString”用法笔记 在实际操作当中,我们经常会遇到将 Session 的值转为 String ...

  10. C++学习之引用

    C++学习之引用         临时变量.引用参数和const         现在,当参数为const引用的时候,如果实参与引用参数不匹配,C++将生成临时变量.C++将在下面两种情况下生成临时变 ...