http://blog.sina.com.cn/s/blog_62161a4d01019b7g.html
box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典
的一个布局应用就是布局的垂直等高、水平均分、按比例划分。
目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-
moz)、opera(-0)、chrome/safari（-webkit)。
一、box-flex属性
box-flex主要让子容器针对父容器的宽度按一定规则进行划分
HTML代码：
01
02
03
CSS代码：
.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
}
.sectionOne{
background:orange;
-moz-box-flex:3;
-webkit-box-flex:3;
box-flex:3;
}
.sectionTwo{
background:purple;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
.sectionThree{
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
background:green;
}
展示效果：
说明：
必须给父容器wrap定义css属性display:box其子容器才可以进行划分(如果定了display:box则该容器则定义为了内联元素
，使用margin:0px auto让其居中是无效的，要想使其居中只能通过它的父容器的text-align:center);
分别给sectionOne、sectionTwo、sectionThree的box-flex设置了3、2、1，也就是说这三个子容器将父容器wrap的宽度
600px分为6份，sectionOne占居父结构宽度的3/6即300px，sectionOne占居父结构宽度的2/6即200px，sectionThree占居
父结构宽度的1/6即100px。
以上是按比例数进行划分分配的，如果其中一个子容器或多个子容器设置了固定宽度又会怎样划分那？
如果其中一个子容器或多个子容器设置了固定宽度，其它子容器没有设置，其计算方式是这样的：子容器如果设置了固定
宽度值，该子容器则直接应用设置的宽度值，其它没有设置的则再父容器的宽度基础上减去子容器设置的固定宽度，在剩
下的宽度基础上按一定比例进行划分分配。请看下面代码
HTML代码
01
02
03
CSS代码
.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
}
.sectionOne{
background:orange;
-moz-box-flex:3;
-webkit-box-flex:3;
box-flex:3;
}
.sectionTwo{
background:purple;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
.sectionThree{
width:200px;//设置固定宽度
background:green;
}
展示效果
说明：
sectionThree设置了固定宽度为200px，父容器的宽度600px减去改子容器的200px还剩下400px，这400px宽度值则按box-
flex设置的值进行划分，sectionOne占居3/4即300px,sectionTwo占居1/4即100px。
在以上代码的基础上给sectionTwo子容器添加margin:0px 50px使子容器之间产生一定的间隔其宽度又如何进行分配划分
的那？接着看
CSS代码
.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
}
.sectionOne{
background:orange;
-moz-box-flex:3;
-webkit-box-flex:3;
box-flex:3;
}
.sectionTwo{
background:purple;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
margin:0px 50px;//添加margin属性
}
.sectionThree{
width:200px;
background:green;
}
展示效果
说明：
父容器的宽度600px减去设置了子容器的200px基础上再减去100px(2×50)剩下300px，这300px宽度值则按box-flex设置的
值进行划分，sectionOne占居3/4即225px,sectionTwo占居1/4即75px。
二、box属性
具体属性如下代码所示：
box-orient | box-direction | box-align | box-pack | box-lines
1、box-orient
box-orient(orient译为排列更准确)用来确定父容器里子容器的排列方式，是水平还是垂直。可选属性如下所示：
horizontal | vertical | inline-axis | block-axis | inherit
horizontal、inline-axis说明：
给box设置horizontal或inline-axis属性其效果似乎表现一致，都可将子容器水平排列，具体两者有什么实质差别暂时还
没有搞清楚。
如果父容器选择horizontal或inline-axis属性对子容器进行水平排列，其是对父容器的宽度进行分配划分。此时如果父
容器定义了高度值，其子容器的高度值设置则无效状态，所有子容器的高度等于父容器的高度值；如果父容器不设置高度
值，其子容器的高度值才有效并且取最大高度值的子容器的高度。
HTML代码：
01
02
03
CSS代码：
.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
box-orient:horizontal;//水平排列
}
.sectionOne{
background:orange;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
.sectionTwo{
background:purple;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
.sectionThree{
width:100px;
background:green;
}
展示效果：
vertical、block-axis说明：
给box设置vertical或block-axis属性(此属性是默认值)其效果似乎表现一致，都可将子容器垂直排列，具体两者有什么
实质差别暂时还没有搞清楚。
如果父容器选择vertical或block-axis属性对子容器进行垂直排列，其是对父容器的高度进行分配划分。此时如果父容器
定义了宽度值，其子容器的宽度值设置则无效状态；如果父容器不设置宽度值，其子容器的宽度值才有效并且取最大宽度
值的子容器的宽度。
HTML代码：
01
02
03
CSS代码：
.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
box-orient:vertical;//垂直排列
}
.sectionOne{
background:orange;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
.sectionTwo{
background:purple;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
.sectionThree{
height:100px;
background:green;
}
展示效果：
inherit说明：
inherit属性则是让子容器继承父容器的相关属性。
2、box-direction
box-direction用来确定父容器里的子容器排列顺序，具体属性如下代码所示：
normal | reverse | inherit
normal是默认值
按照HTML文档里结构的先后顺序依次展示。如下代码，如果box-direction设置为normal，则结构依次展示sectionOne、
sectionTwo、sectionThree
HTML代码：
01
02
03
CSS代码：
.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-direction:normal;//设置mormal默认值
-webkit-box-direction:normal;//设置mormal默认值
box-direction:normal;//设置mormal默认值
}
.sectionOne{
background:orange;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
.sectionTwo{
background:purple;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
.sectionThree{
width:100px;
background:green;
}
展示效果：
reverse表示反转
如上面所示设置nomal其结构的排列顺序为sectionOne、sectionTwo、sectionThree；如果设置reverse反转，其结构的排
列顺序为sectionThree、sectionTwo、sectionOne
HTML代码：
01
02
03
CSS代码：
.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-direction:reverse;//设置为反转
-webkit-box-direction:reverse;//设置为反转
box-direction:reverse;//设置为反转
}
.sectionOne{
background:orange;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
.sectionTwo{
background:purple;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
.sectionThree{
width:100px;
background:green;
}
展示效果：
3、box-align
box-align表示父容器里面子容器的垂直对齐方式，可选参数如下所示：
start | end | center | baseline | stretch
HTML代码：
01
02
03
CSS代码：
.wrap{
width:600px;
height:108px;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-align:stretch;
-webkit-box-align:stretch;
-o-box-align:stretch;
box-align:stretch;
}
.wrap section{
height:80px;
}
.wrap .sectionOne{
background:orange;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
.wrap .sectionTwo{
background:purple;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
height:108px;
}
.wrap .sectionThree{
width:100px;
background:green;
}
start
在box-align表示居顶对齐，如下图所示
end
在box-align表示居底对齐，如下图所示
center
在box-align表示居中对齐，如下图所示
stretch
在box-align表示拉伸，拉伸到与父容器等高
3、box-pack
box-pack表示父容器里面子容器的水平对齐方式，可选参数如下所示：
start | end | center | justify
HTML代码：
01
02
03
CSS代码：
.wrap{
width:600px;
height:108px;
border:1px solid red;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-pack:end;
-webkit-box-pack:end;
-o-box-pack:end;
box-pack:end;
}
.wrap section{
width:100px;
}
.wrap .sectionOne{
background:orange;
}
.wrap .sectionTwo{
background:purple;
}
.wrap .sectionThree{
background:green;
}
start
在box-pack表示水平居左对齐，如下图所示
end
在box-pack表示水平居右对齐，如下图所示
center
在box-pack表示水平居中对齐，如下图所示
justify
在box-pack表示水平等分父容器宽度（唯一遗憾的是，firefox与opera暂时不支持，只有safari、chrome支持）
- CSS3.0盒模型display:box;的使用
CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...
- CSS3盒模型display:box详解
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...
- CSS3盒模型display:box;box-flex:3;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 移动web开发实践-css3（1）盒模型display:-webkit-box;的使用
提到移动布局不得不提到盒模型display:-webkit-box;这个属性,在移动布局中浮动已经不在重要,相反自适应成为主要的需求,所以display:-webkit-box;变得尤为重要. box ...
- day 39 盒模型 display 浮动
一.盒模型 属性: width:内容的宽度 height:内容的高度 padding:内边距 内容到边框的距离 border:边框 margin:外边距 另一个边到另一个边的距离 盒模型的计算: 总结 ...
- 弹性盒模型display:flex
Flex布局意为"弹性布局",用来为盒模型提供更多灵活性.此外,Flex定义的容器可以对块级元素(display: flex;)或行内元素(display: inline-flex ...
- CSS3盒模型display:box简述
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. box-f ...
- [转]CSS3盒模型display:box详解
时间:2014-02-25来源:网络作者:未知编辑:RGB display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布 ...
- CSS3盒模型display初探（display:box/display:flex）
可以实现水平等分切割等.日后在研究,做个记录. 首先要声明:display:box,像谷歌浏览器要加前缀识别码:display:-webkit-box; 然后才开始使用其属性,同时也是要带上前缀识别码 ...
随机推荐
- 20145218 GDB调试汇编堆栈过程分析
GDB调试汇编堆栈过程分析 虚拟机中分析过程 输入gcc - g example.c -o example -m32指令在64位机器上产生32位汇编,但出现以下错误: 这时需要使用sudo apt-g ...
- 《高级Web应用程序设计》课程
一.课堂课件 全部授课内容 二.作业 访问ftp://192.168.42.254:22,登录后找到自己的姓名文件夹,放入作业即可.登录账号为stu1,密码为空. 已布置练习 练习1(截止日期10月1 ...
- 手机版web相关meta配置
若页面需默认用ie兼容内核,增加标签: 若页面需默认用ie标准内核,增加标签: --> 页面标题
- javascript进阶系列专题：闭包(Closure)
在javascript中,函数可看作是一种数据,可以赋值给变量,可以嵌套在另一个函数中. var fun = function(){ console.log("平底斜"); } f ...
- Sql Server如何新建计划任务
打开Sql Server数据库,在管理中找到维护计划功能,右击维护计划选择维护计划向导.如图所示: 打开维护计划向导后,在第一个步骤下输入计划名称. 输入完计划名称后,点击右下角的更改按钮,这里是配置 ...
- document.all.wb.ExecWB
<%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib uri=&quo ...
- Python【7】-数据分析准备
一.经常用到的python库: Numpy:Python科学计算的基础包: pandas:提供了能使我们快捷的处理结构化数据的大量数据结构和函数: matplotlib:用于绘制数据图表的python ...
- 《Linux内核设计与实现》课本第四章自学笔记——20135203齐岳
<Linux内核设计与实现>课本第四章自学笔记 进程调度 By20135203齐岳 4.1 多任务 多任务操作系统就是能同时并发的交互执行多个进程的操作系统.多任务操作系统使多个进程处于堵 ...
- ios中属性和对象的初始化
属性和对象的初始化为了方便记忆, 我们可以都使用self.来初始化. 这样可以避免内存的过度释放.
- 编译MVC解决方案老出现这个问题的原因
Server Error in '/' Application. The view at '~/Views/Home/Index.cshtml' must derive from WebViewPag ...
