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. SerialPort

    using System;   using System.Collections.Generic;   using System.ComponentModel;   using System.Data ...

  2. 存储和读取MYSQL时间戳

    from_unixtime(date,'%Y%m%d')是MySQL里的时间函数date为需要处理的参数(该参数是Unix 时间戳),可以是字段名,也可以直接是Unix 时间戳字符串后面的 '%Y%m ...

  3. UVA 806 Spatial Structures

    题意: 如果某一大区域所有色块颜色是相同的,那么这一个大区域就算作一块,如果不同,则将其划分成四个小区域,然后重复上述步骤递归进行直到所有区域的颜色相同为止.然后根据上面划分的区域建树,小区域作为大区 ...

  4. TimePicker控件、帧动画、补间动画

    1.TimePicker控件 最近感觉每个开发平台的控件基本都差不多,在Android中控件的事件和.net控件直接写事件有一定的区别,net事件可以直接界面进行事件的绑定哈.不过在Silverlig ...

  5. 【IOS学习基础】内存管理

    1.内存几大区域 1> 栈区:局部变量(基本数据类型.指针变量). 2> 堆区:程序运行的过程中动态分配的存储空间(创建的对象). 3> BSS段:没有初始化的全局变量和静态变量. ...

  6. iOS开发--系统通讯录的访问与添加联系人

    公司项目有访问通讯录的需求,所以开始了探索之路.从开始的一无所知,到知识的渐渐清晰.这一切要感谢广大无私分享的 “coder”,注:我是尊称的语气! 苹果提供了访问系统通讯录的框架,以便开发者对系统通 ...

  7. 根据反射获取属性信息并创建DataTable

    查看了一些方法之后,做了一些总结,此方法适用于传进的参数是List<T>类型, 但事先并不知道T的类型,T可以是自定义类型. public DataTable CreateDataTabl ...

  8. 关于Eclipse的编码配置和字体大小设置

    编码设置 1.工作空间编码:Window-->Preferences-->General-->Workspace 2.工程文件编码:项目-->Properties-->R ...

  9. windows下使用mingw编译python扩展模块

    环境: 1.python2.7.2 2.mingw20120426 说明: PYTHON_HOME:不做特殊说明的话,默认代表python的安装路径. MINGW_HOME:不做特殊说明的话,默认代表 ...

  10. Hibernate摘记

    原理: 1.通过Configuration().configure();读取并解析hibernate.cfg.xml配置文件2.由hibernate.cfg.xml中的<mapping reso ...