box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。
目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/safari（-webkit)。
 
box-flex主要让子容器针对父容器的宽度按一定规则进行划分。举个栗子：
  1. <!DOCTYPE html>
  2. <html><meta charset="utf-8" />
  3. <style>
  4. .wrap {
  5.     display: -webkit-box;
  6.     -webkit-box-orient: horizontal;
  7. }
  8. .child {
  9.     min-height: 200px;
  10.     border: 2px solid #666;
  11.     margin: 10px;
  12.     font-size: 40px;
  13.     font-weight: bold;
  14.     font-family: Georgia;
  15.     -webkit-box-align: center;
  16. }
  17. .w200 {width: 200px}
  18. .flex1 {display:block;-webkit-box-flex: 3}
  19. .flex2 {display:block;-webkit-box-flex: 1}
  20. </style>
  21. <div class="wrap">
  22.     <!-- <div class="child w200">200px</div>
  23.     <div class="child flex1">比例1</div>
  24.     <div class="child flex2">比例2</div> -->
  25.     <input type="text" class="child flex1" value="比例1">
  26.     <input type="text" class="child flex2" value="比例2">
  27. </div>
  28. </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. mybatis中使用log4j

    Mybatis默认使用有slf4j,所以必须加入下面的依赖,否则可能出现日志无法打印sql或者无法打印resultset. <dependency> <groupId>org. ...

  2. 怎么在一个list集合里面筛选重复的数据，在重复的数据中取最后添加的那条数据

    1.先将集合进行分组(分组字段)2.在判断分组的数量是否大于 03.大于0,则有重复的数据

  3. 各版本SDK Tools及ADT下载技巧

    我们在开发的时候,尤其是使用Eclipse安装ADT插件进行环境配置,我们需要从下载ADT插件及SDK,当我们从官网下载的时候,有的时候可能找不到下载的地方或者下载不到自己想要的版本,我就在此总结下如 ...

  4. JAVASCRIPT——文字出现效果练习

    写一句诗.诗的最初状态是隐藏的,效果是让诗缓慢出现,直到显示完全 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  5. 自定义不等高的cell-(纯代码)frame

    给模型增加frame数据 所有子控件的frame cell的高度 @interface XMGStatus : NSObject /**** 文字\图片数据 ****/ // ..... /**** ...

  6. Stat

    Description 请你编程实现一个简单(渣渣)的文本编辑器,具体要求是:给定一个单词,请你输出它在给定的文章中出现的次数和第一次出现的位置.注意:匹配单词时,不区分大小写,但要求完全匹配,即给定 ...

  7. 用Struts2标签实现Map的迭代

    最近在做一个论坛,论坛通常分为几个主版块,每一个主版块下面又有几个子版块. 想不出更好的展现方式,最终采用了如下的方法来实现: 用一个Map,HashMap或者Treemap承载之.一个子版块名字对应 ...

  8. CSS 3 属性学习 —— 2. RGBA

    RGBA 是 CSS3 中用来控制颜色的单位,分别是 Red Green Blue 三原色和 Alpha 透明度的缩写. 也就是说该属性可以帮助我们在设置颜色的同时,也设置了其透明度. 其实就是 RG ...

  9. C++进程间通信（常用理解例子）-买票

    #include "stdafx.h" #include <iostream>using namespace std; #include "windows.h ...

  10. 习惯使用断言Assert

    一直在给党做项目,我们这些可怜兮兮的学生都没太多时间安排自己的活动了,写个blog都要在中午休息的时间. 项目用的是.NET,本来也想分享一些干货点的东西,但博客园里的前辈把这类文章已经分享泛滥了,想 ...