box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。
目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/safari（-webkit)。
 
box-flex主要让子容器针对父容器的宽度按一定规则进行划分。举个栗子：
<!DOCTYPE html>

<html><meta charset="utf-8" />

<style>

.wrap {

    display: -webkit-box;

    -webkit-box-orient: horizontal;

}

.child {

    min-height: 200px;

    border: 2px solid #666;

    margin: 10px;

    font-size: 40px;

    font-weight: bold;

    font-family: Georgia;

    -webkit-box-align: center;

}

.w200 {width: 200px}

.flex1 {display:block;-webkit-box-flex: 3}

.flex2 {display:block;-webkit-box-flex: 1}

</style>

<div class="wrap">

    <!-- <div class="child w200">200px</div>

    <div class="child flex1">比例1</div>

    <div class="child flex2">比例2</div> -->

    <input type="text" class="child flex1" value="比例1">

    <input type="text" class="child flex2" value="比例2">

</div>

</html>

Ps:例如上面的child要求是块（block）元素才有效。

CSS3盒模型display:-webkit-box;的使用的更多相关文章

  1. CSS3盒模型display:box详解

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

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

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

  3. CSS3盒模型display:box简述

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

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

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

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

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

  6. css3盒模型学习--利用box自适应布局

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

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

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

  8. 移动web开发实践-css3（1）盒模型display:-webkit-box;的使用

    提到移动布局不得不提到盒模型display:-webkit-box;这个属性,在移动布局中浮动已经不在重要,相反自适应成为主要的需求,所以display:-webkit-box;变得尤为重要. box ...

  9. CSS3盒模型温故

    CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.bloc ...

随机推荐

  1. 常见Web Service 使用网址

    下面的网址是常用Web Service http://www.webxml.com.cn/zh_cn/web_services.aspx 里面的很多Web Service接口...可以用到的,很有用!

  2. C#委托 Lamda表达式

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. 安卓模拟器创建和使用SD卡的方法

    安卓模拟器创建和使用SD卡的方法: 创建一个SD卡镜像文件 打开cmd,进入Android SDK安装路径下的tools目录下,输入如下命令:mksdcard 1024M sdcard.img 该命令 ...

  4. oracle中的B-TREE索引

    在字段值情况不同的条件下测试B-TREE索引效率 清空共享池和数据缓冲区alter system flush shared_pool;alter system flush buffer_cache; ...

  5. protocol(协议)

      可以用来声明一大堆方法(不能声明成员变量) 只要某个类遵守了这个协议,就相当于拥有这个协议中的所有方法声明 只要父类遵守了某个协议,就相当于子类也遵守了   //定义一个名叫MyProtocol的 ...

  6. C# 过滤特殊字符

    . /// <summary> /// 过滤不安全的字符串 /// </summary> /// <param name="Str"></ ...

  7. sublime text 2中Windows下编写的脚本在Linux平台上运行遇到字符问题

    今天在windows下的sublime text 2下写了个脚本,上传到ubuntu服务器中执行后提示: -bash: /usr/bin/python: /usr/bin/python^M: bad ...

  8. linux 下idea 启动tomcat报JMX 1099错误解决办法

    开始使用linux开发环境,在配置idea 下tomcat 启动时报错,提示错误为unable to ping server at localhost:1099. 解决办法: 修改/etc/hosts ...

  9. VMware的CentOS无法上网的解决方法

    1)点击 VM->Settings Hardware 选项卡下面 2)点击 Network Adapter 设置在虚拟机中将网络配置设置成NAT 3)开启 Windows服务中的 VMware ...

  10. Javascript基本概念（语句和函数）

    语句 for语句 for语句中的初始化表达式,控制表达式和循环后表达式都是可选的,将这三个表达式省略,就会创建一个无线循环. ECMAScript中不存在块级作用域,因此在循环内容部定义的变量也可以在 ...