想做自适应的流体布局 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. 关于微信的jsapi_ticket的获取方法;

    对于一个从前端转到后端的开发人员来说,这个玩意儿开始的时候是有点郁闷:不过明白原理之后就简单了, 获取jsapi_ticket:必须先获取access_token; 微信开发文档说access_tok ...

  2. freemaker

    FreeMarker模板文件主要由如下4个部分组成:  1,文本:直接输出的部分  2,注释:<#-- ... -->格式部分,不会输出  3,插值:即${...}或#{...}格式的部分 ...

  3. UNIX网络编程卷1 时间获取程序server UDP 协议无关

    本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie /** * UDP 协议无关 调用 getaddrinfo 和 udp_server **/ ...

  4. 简单C#文字转语音

    跟着微软走妥妥的,C#文字转语音有很多参数我就不说了,毕竟我也是初学者.跟大家分享最简单的方法,要好的效果得自己琢磨喽: 先添加引用System.Speech程序集: using System; us ...

  5. AdventureWorks2008 数据库安装

    我使用的操作系统是 win 8.1,由于对早前安装的sql server 2008的兼容性不太好,要安装对应的service pack来解决一下这个问题. 如何使用 SQL Server 在 Wind ...

  6. 防止自己的网站被别人frame引用造成钓鱼

    自己负责的某一网站,最近被不法份子通过<frame>的方式引入,用户点击对方的域名后,看到的内容跟自己网站一模一样.但是右击查看源码就会发现其中的原理: <!DOCTYPE HTML ...

  7. Filemanager 的使用

    filemanager的使用包括: 1.创建文件夹 2.删除文件夹 3.写入文件 4.复制文件 5.移动文件 6.删除文件​ 一.创建文件夹​ 首先宏的定义一个字符串作为地址的​来获取当前的docum ...

  8. android Fragment相关概念简介

    Fragment 详细介绍连接:http://blog.csdn.net/harvic880925/article/details/44927375 fragment是一种控制器对象,activity ...

  9. WCF遇到Oracle问题

    解决 选中下图中对网站和项目使用IIS….64位版

  10. LeetCode 1. twoSums

    C++: vector<int> twoSum(vector<int>& nums, int target) { unordered_map<int, int&g ...