说明：本文档兼容性测试基础环境为：windows系统；IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51

语法：

box-flex：<number>

默认值：0

取值：

<number>：
使用浮点数指定对象所分配其父元素剩余空间的比例。

说明：

设置或检索弹性盒模型对象的子元素如何分配其剩余空间。

示例：将一个容器分成6份，子对象a分1份，b分2份，c分3份

HTML Code：

<ul id="box">

	<li>a</li>

	<li>b</li>

	<li>c</li>

</ul>

CSS Code：

#box{display:box;width:240px;height:100px;margin:0;padding:10px;list-style:none;}

#box li:nth-child(1){box-flex:1;}

#box li:nth-child(2){box-flex:1;}

#box li:nth-child(3){box-flex:2;}

上面代码请自行加上-moz-,-webkit-之类的。box-flex生效需定义其父元素display为box或inline-box

误区：注意box-flex只是动态分配父元素的剩余空间，而不是整个父元素的空间。如上例，父元素#box的宽度为240px，如果你认为a,b,c的 宽度分别为60, 60, 120那么就错了，因为box-flex只是分配父元素的剩余空间而已，所以a,b,c所分到的应该是除内容外所剩余下来的宽度

为了清晰所谓的剩余空间分配，对上例稍作修改，HTML Code不变

CSS Code：

#box{display:box;width:240px;height:100px;margin:0;padding:10px;list-style:none;}

.box li{width:50px;padding:7px;}

#box li:nth-child(1){box-flex:1;}

#box li:nth-child(2){box-flex:1;}

#box li:nth-child(3){box-flex:2;}

从上面的代码，我们可以知道a,b,c的宽度分别为50+7*2=64px，三者加起来即 192px，所以剩下的240-192=48px才是父元素的剩余空间，于是a,b,c按照设定的1:1:2来分配这48px，a分得12px，b分得 12px，c分得24px，所以最终a=64+12=76px，b=64+12=76px，c=64+24=88px

对应的脚本特性为boxFlex。

兼容性：

示例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>box-flex_CSS参考手册_web前端开发参考手册系列</title>
<style>
h1{font:bold 20px/1.5 georgia,simsun,sans-serif;}
.box{display:-webkit-box;display:-moz-box;display:-o-box;display:-ms-box;display:box;background:#000;width:240px;height:100px;margin:0;padding:10px;list-style:none;vertical-align:top;}
#box li:nth-child(1){-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;-ms-box-flex:1;box-flex:1;background:#666;}
#box li:nth-child(2){-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;-ms-box-flex:1;box-flex:1;background:#999;}
#box li:nth-child(3){-webkit-box-flex:2;-moz-box-flex:2;-o-box-flex:2;-ms-box-flex:2;box-flex:2;background:#ccc;}
</style>
</head>
<body>
<h1>box-flex示例：</h1>
<ul id="box" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
</body>
</html>

CSS3 弹性盒模型 box-flex的更多相关文章

  1. CSS3弹性盒模型，Flex布局教程

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...

  2. css3弹性盒模型flex快速入门与上手(align-content与align-items)

    接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...

  3. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

  4. CSS3弹性盒模型布局模块介绍

    来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...

  5. css3基础教程：CSS3弹性盒模型

    今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...

  6. CSS3弹性盒模型新版和老版写法差异

    1.在使用弹性盒模型的时候父元素必须要加display:box 或 display:inline-box: 新版弹性盒模型:flex:display : flex 老版弹性盒模型:box : disp ...

  7. css和css3弹性盒模型实现元素宽度（高度）自适应

    一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  8. （转）详解css3弹性盒模型（Flexbox)

    今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...

  9. css3弹性盒模型

    一.简介 css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局. 目 ...

  10. CSS3弹性盒模型flexbox完整版教程

    http://caibaojian.com/flexbox-guide.html 来自CSS Tricks上的一个教程,原文为:A Complete Guide to Flexbox.文中详细的介绍了 ...

随机推荐

  1. scala的hello world出现的问题

    build出现: Error:scalac: Error: org.jetbrains.jps.incremental.scala.remote.ServerExceptionError compil ...

  2. 转Python 和C#的交互

    http://www.cnblogs.com/wilber2013/category/708919.html IronPython和C#交互   IronPython是一个.NET平台上的Python ...

  3. Oracle环境变量设置脚本

    每次都傻乎乎的往bashrc里面写环境变量,感觉不任性.于是,看了本书了解了/etc/oratab这个东东后,参考着书也写了一个设置Oracle环境变量的脚本. 在/etc/下创建oraset,权限设 ...

  4. Mycat 数据库分库分表中间件

    http://www.mycat.io/ Mycat 国内最活跃的.性能最好的开源数据库中间件! 我们致力于开发高性能的开源中间件而努力! 实体书Mycat权威指南 »开源投票支持Mycat下载 »s ...

  5. iview-admin打包笔记

    在程序根目录右键打开cmd,输入 npm run build 这时就会进入打包的步骤,打包好之后就会在程序根目录出现一个dist的文件夹,里面有一个index.html文件和另一个dist的文件夹. ...

  6. 2018-2019 20165226 Exp5 MSF基础应用

    2018-2019 20165226 Exp5 MSF基础应用 目录 一.实验内容说明及基础问题回答 二.实验过程 Task1 主动攻击实践 ms08_067 ms17_010 Task2 针对浏览器 ...

  7. position和margin的绝对定位和相对定位

    电脑桌面清理干净之后,果然快了很多,桌面上的东西会占用内存,导致电脑变慢,以前我看到表姐的电脑桌面堆满了东西,我就在心里默默的鄙视不懂玩电脑的人,现在我竟然也养成了这种坏毛病..保存东西的时候放在桌面 ...

  8. JVM的DirectMemory设置

    转载http://blog.csdn.net/zshake/article/details/46785469 几台服务器的JVM占用内存总是持续增长,大大超过-Xmx设定的值,服务器物理内存几乎被耗尽 ...

  9. 将ESXI所有的端口组迁移到分布式交换机的步骤

    1.如果是DELL服务器,一般有2-4个网口,那么所有的网口都把网线插到交换机上:2.DELL安装ESXI系统,根据不同的DELL硬件,要安装不同的ESXI版本.原则上越高版本,支持的硬件越多向下兼容 ...

  10. file_get_contents是打工文件或URL获取内容的方法，比其稳定的还有curl_get_contents

    相信使用过file_get_contents函数的朋友都知道,当获取的$url访问不了时,会导致页面漫长的等待,甚至还能导致PHP进程占用CPU达100%,因此这个函数就诞生了 分享一个实际在用的函数 ...