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. Java中两种实现多线程方式的对比分析

    本文转载自:http://www.linuxidc.com/Linux/2013-12/93690.htm#0-tsina-1-14812-397232819ff9a47a7b7e80a40613cf ...

  2. CodeBlocks13.12汉化以及去掉注释及字符串的下划线

    汉化: 在安装目录 D:\Program Files\CodeBlocks\share\CodeBlocks(我的安装目录)下,新建文件夹locale,然后在locale文件夹内建立文件夹zh_CN ...

  3. python正则表达式练习篇2

    首先生成正则表达式练习的数据: #! /usr/bin/python from random import randint, choice from string import lowercase f ...

  4. DBI && MySQL lock

    DBI: url set isolation to dirty read my $npmdb_dbh = DBI->connect("DBI:ODBC:npmdb", &qu ...

  5. Python爬虫实战（1）：爬取Drupal论坛帖子列表

    1,引言 在<Python即时网络爬虫项目: 内容提取器的定义>一文我们定义了一个通用的python网络爬虫类,期望通过这个项目节省程序员一半以上的时间.本文将用一个实例讲解怎样使用这个爬 ...

  6. python 学习day6（面向对象）

    博客部分内容转自:http://www.cnblogs.com/wupeiqi/p/4493506.html 面向对象编程介绍 为什么要用面向对象进行开发? 面向对象的特性:封装.继承.多态 类.方法 ...

  7. struts2之动态方法调用(转)

    转自:http://blog.csdn.net/longwentao/article/details/6940289 当我们访问一个Action时,默认是访问execute()方法,但当在一个Acti ...

  8. Android源码下载

    Android源码下载 1.安装git 2.安装repo 从这里 https://dl-ssl.google.com/dl/googlesource/git-repo/repo 下载repo文件 3. ...

  9. docker网络-如何让外部网络访问容器资源

    docker网络-如何让外部网络访问容器资源 安装httpd 服务: docker:/root# docker exec -it f63b2633d146 bash bash-4.1# yum ins ...

  10. Pods 更新后提示Bundle资源找不到

    http://www.oschina.net/question/101347_2159145