display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。

目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。
一、box-flex属性
box-flex主要让子容器针对父容器的宽度按一定规则进行划分
html代码：

  1. <article>
  2.     <section>01</section>
  3.     <section>02</section>
  4.     <section>03</section>
  5. </article>

CSS代码：

  1. .wrap{
  2.     width:600px;
  3.     height:200px;
  4.     display:-moz-box;
  5.     display:-webkit-box;
  6.     display:box;
  7. }
  8. .sectionOne{
  9.     background:orange;
  10.     -moz-box-flex:3;
  11.     -webkit-box-flex:3;
  12.     box-flex:3;
  13. }
  14. .sectionTwo{
  15.     background:purple;
  16.     -moz-box-flex:2;
  17.     -webkit-box-flex:2;
  18.     box-flex:2;
  19. }
  20. .sectionThree{
  21.     -moz-box-flex:1;
  22.     -webkit-box-flex:1;
  23.     box-flex:1;
  24.     background:green;
  25. }

展示效果：

说明：
必须给父容器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代码：

  1. <article>
  2.     <section>01</section>
  3.     <section>02</section>
  4.     <section>03</section>
  5. </article>

CSS代码：

  1. .wrap{
  2.     width:600px;
  3.     height:200px;
  4.     display:-moz-box;
  5.     display:-webkit-box;
  6.     display:box;
  7. }
  8. .sectionOne{
  9.     background:orange;
  10.     -moz-box-flex:3;
  11.     -webkit-box-flex:3;
  12.     box-flex:3;
  13. }
  14. .sectionTwo{
  15.     background:purple;
  16.     -moz-box-flex:1;
  17.     -webkit-box-flex:1;
  18.     box-flex:1;
  19. }
  20. .sectionThree{
  21.     width:200px;//设置固定宽度
  22.     background:green;
  23. }

展示效果：

说明：
sectionThree设置了固定宽度为200px，父容器的宽度600px减去改子容器的200px还剩下400px，这400px宽度值则按box-flex设置的值进行划分，sectionOne占居3/4即300px,sectionTwo占居1/4即100px。
在以上代码的基础上给sectionTwo子容器添加margin:0px 50px使子容器之间产生一定的间隔其宽度又如何进行分配划分的那？接着看
CSS代码：

  1. .wrap{
  2.     width:600px;
  3.     height:200px;
  4.     display:-moz-box;
  5.     display:-webkit-box;
  6.     display:box;
  7. }
  8. .sectionOne{
  9.     background:orange;
  10.     -moz-box-flex:3;
  11.     -webkit-box-flex:3;
  12.     box-flex:3;
  13. }
  14. .sectionTwo{
  15.     background:purple;
  16.     -moz-box-flex:1;
  17.     -webkit-box-flex:1;
  18.     box-flex:1;
  19.         margin:0px 50px;//添加margin属性
  20. }
  21. .sectionThree{
  22.     width:200px;
  23.     background:green;
  24. }

展示效果：

说明：
父容器的宽度600px减去设置了子容器的200px基础上再减去100px(2×50)剩下300px，这300px宽度值则按box-flex设置的值进行划分，sectionOne占居3/4即225px,sectionTwo占居1/4即75px。
二、box属性
上面”css3弹性盒子模型之box-flex”将box-flex如何对父容器的宽度进行划分分配讲解完毕，下面在看一下父容器里面的box属性包括哪些box属性，具体属性如下代码所示：

  1. box-orient | box-direction | box-align | box-pack | box-lines

1、box-orient
box-orient(orient译为排列更准确)用来确定父容器里子容器的排列方式，是水平还是垂直。可选属性如下所示：

  1. horizontal | vertical | inline-axis | block-axis | inherit

horizontal、inline-axis说明：
给box设置horizontal或inline-axis属性其效果似乎表现一致，都可将子容器水平排列，具体两者有什么实质差别暂时还没有搞清楚。如果父容器选择horizontal或inline-axis属性对子容器进行水平排列，其是对父容器的宽度进行分配划分。此时如果父容器定义了高度值，其子容器的高度值设置则无效状态，所有子容器的高度等于父容器的高度值；如果父容器不设置高度值，其子容器的高度值才有效并且取最大高度值的子容器的高度。
HTML代码：

  1. <article>
  2.     <section>01</section>
  3.     <section>02</section>
  4.     <section>03</section>
  5. </article>

CSS代码：

  1. .wrap{
  2. 	width:600px;
  3. 	height:200px;
  4. 	display:-moz-box;
  5. 	display:-webkit-box;
  6. 	display:box;
  7. 	-moz-box-orient:horizontal;
  8. 	-webkit-box-orient:horizontal;
  9. 	box-orient:horizontal;//水平排列
  10. }
  11. .sectionOne{
  12. 	background:orange;
  13. 	-moz-box-flex:1;
  14. 	-webkit-box-flex:1;
  15. 	box-flex:1;
  16. }
  17. .sectionTwo{
  18. 	background:purple;
  19. 	-moz-box-flex:2;
  20. 	-webkit-box-flex:2;
  21. 	box-flex:2;
  22. }
  23. .sectionThree{
  24. 	width:100px;
  25. 	background:green;
  26. }

展示效果：

vertical、block-axis说明：
给box设置vertical或block-axis属性(此属性是默认值)其效果似乎表现一致，都可将子容器垂直排列，具体两者有什么实质差别暂时还没有搞清楚。如果父容器选择vertical或block-axis属性对子容器进行垂直排列，其是对父容器的高度进行分配划分。此时如果父容器定义了宽度值，其子容器的宽度值设置则无效状态；如果父容器不设置宽度值，其子容器的宽度值才有效并且取最大宽度值的子容器的宽度。
HTML代码：

  1. <article>
  2.     <section>01</section>
  3.     <section>02</section>
  4.     <section>03</section>
  5. </article>

CSS代码：

  1. .wrap{
  2. 	width:600px;
  3. 	height:200px;
  4. 	display:-moz-box;
  5. 	display:-webkit-box;
  6. 	display:box;
  7. 	-moz-box-orient:vertical;
  8. 	-webkit-box-orient:vertical;
  9. 	box-orient:vertical;//垂直排列
  10. }
  11. .sectionOne{
  12. 	background:orange;
  13. 	-moz-box-flex:1;
  14. 	-webkit-box-flex:1;
  15. 	box-flex:1;
  16. }
  17. .sectionTwo{
  18. 	background:purple;
  19. 	-moz-box-flex:2;
  20. 	-webkit-box-flex:2;
  21. 	box-flex:2;
  22. }
  23. .sectionThree{
  24. 	height:100px;
  25. 	background:green;
  26. }

展示效果：

inherit说明：
inherit属性则是让子容器继承父容器的相关属性。
2、box-direction
box-direction用来确定父容器里的子容器排列顺序，具体属性如下代码所示：

  1. normal | reverse | inherit

normal是默认值
按照HTML文档里结构的先后顺序依次展示。如下代码，如果box-direction设置为normal，则结构依次展示sectionOne、sectionTwo、sectionThree.
HTML代码：

  1. <article>
  2.     <section>01</section>
  3.     <section>02</section>
  4.     <section>03</section>
  5. </article>

CSS代码：

  1. .wrap{
  2. 	width:600px;
  3. 	height:200px;
  4. 	display:-moz-box;
  5. 	display:-webkit-box;
  6. 	display:box;
  7. 	-moz-box-direction:normal;//设置mormal默认值
  8. 	-webkit-box-direction:normal;//设置mormal默认值
  9. 	box-direction:normal;//设置mormal默认值
  10. }
  11. .sectionOne{
  12. 	background:orange;
  13. 	-moz-box-flex:1;
  14. 	-webkit-box-flex:1;
  15. 	box-flex:1;
  16. }
  17. .sectionTwo{
  18. 	background:purple;
  19. 	-moz-box-flex:2;
  20. 	-webkit-box-flex:2;
  21. 	box-flex:2;
  22. }
  23. .sectionThree{
  24. 	width:100px;
  25. 	background:green;
  26. }

展示效果：

reverse表示反转:
如上面所示设置nomal其结构的排列顺序为sectionOne、sectionTwo、sectionThree；如果设置reverse反转，其结构的排列顺序为sectionThree、sectionTwo、sectionOne.
HTML代码：

  1. <article>
  2.     <section>01</section>
  3.     <section>02</section>
  4.     <section>03</section>
  5. </article>

CSS代码：

  1. .wrap{
  2. 	width:600px;
  3. 	height:200px;
  4. 	display:-moz-box;
  5. 	display:-webkit-box;
  6. 	display:box;
  7. 	-moz-box-direction:reverse;//设置为反转
  8. 	-webkit-box-direction:reverse;//设置为反转
  9. 	box-direction:reverse;//设置为反转
  10. }
  11. .sectionOne{
  12. 	background:orange;
  13. 	-moz-box-flex:1;
  14. 	-webkit-box-flex:1;
  15. 	box-flex:1;
  16. }
  17. .sectionTwo{
  18. 	background:purple;
  19. 	-moz-box-flex:2;
  20. 	-webkit-box-flex:2;
  21. 	box-flex:2;
  22. }
  23. .sectionThree{
  24. 	width:100px;
  25. 	background:green;
  26. }

展示效果：

3、box-align
box-align表示父容器里面子容器的垂直对齐方式，可选参数如下所示：

  1. start | end | center | baseline | stretch

HTML代码：

  1. <article>
  2. <section>01</section>
  3.     <section>02</section>
  4.     <section>03</section>
  5. </article>

CSS代码：

  1. .wrap{
  2. 	width:600px;
  3. 	height:108px;
  4. 	display:-moz-box;
  5. 	display:-webkit-box;
  6. 	display:box;
  7. 	-moz-box-align:stretch;
  8. 	-webkit-box-align:stretch;
  9. 	-o-box-align:stretch;
  10. 	box-align:stretch;
  11. }
  12. .wrap section{
  13. 	height:80px;
  14. }
  15. .wrap .sectionOne{
  16. 	background:orange;
  17. 	-moz-box-flex:1;
  18. 	-webkit-box-flex:1;
  19. 	box-flex:1;
  20. }
  21. .wrap .sectionTwo{
  22. 	background:purple;
  23. 	-moz-box-flex:2;
  24. 	-webkit-box-flex:2;
  25. 	box-flex:2;
  26. 	height:108px;
  27. }
  28. .wrap .sectionThree{
  29. 	width:100px;
  30. 	background:green;
  31. }

start
在box-align表示居顶对齐，如下图所示

end
在box-align表示居底对齐，如下图所示

center
在box-align表示居中对齐，如下图所示

stretch
在box-align表示拉伸，拉伸到与父容器等高

3、box-pack
box-pack表示父容器里面子容器的水平对齐方式，可选参数如下所示：

  1. start | end | center | justify

HTML代码：

  1. <article>
  2.     <section>01</section>
  3.     <section>02</section>
  4.     <section>03</section>
  5. </article>

CSS代码：

  1. .wrap{
  2. 	width:600px;
  3. 	height:108px;
  4. 	border:1px solid red;
  5. 	display:-moz-box;
  6. 	display:-webkit-box;
  7. 	display:box;
  8. 	-moz-box-pack:end;
  9. 	-webkit-box-pack:end;
  10. 	-o-box-pack:end;
  11. 	box-pack:end;
  12. }
  13. .wrap section{
  14. 	width:100px;
  15. }
  16. .wrap .sectionOne{
  17. 	background:orange;
  18. }
  19. .wrap .sectionTwo{
  20. 	background:purple;
  21. }
  22. .wrap .sectionThree{
  23. 	background:green;
  24. }

start
在box-pack表示水平居左对齐，如下图所示

end
在box-pack表示水平居右对齐，如下图所示

center
在box-pack表示水平居中对齐，如下图所示

justify
在box-pack表示水平等分父容器宽度（唯一遗憾的是，firefox与opera暂时不支持，只有safari、chrome支持）

转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题、最新的WEB前端开发技术(webApp开发、移动网站开发)、最好的WEB前端开发工具和最全的WEB前端开发w3cschool手册

本文链接地址: WEB前端开发(www.css119.com)–CSS3盒模型display:box详解

CSS3盒模型display:box详解的更多相关文章

  1. [转]CSS3盒模型display:box详解

    时间:2014-02-25来源:网络作者:未知编辑:RGB display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布 ...

  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.0盒模型display:box;的使用

    CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...

  5. 转: css3: display:box详解

    示例见:  css3: flexbox (BTW: blog不能包含iframe script真不方便啊~~) display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决 ...

  6. CSS3弹性盒模型 display:box

    刚开始做网页时就有一个困惑,为什么display:block只能垂直排列,如果要水平排列就要使用float:left等方式.这种方法最难受的当然是当子元素的数量改变时,需要去修改子元素的宽度使重新适应 ...

  7. CSS3盒模型display初探（display:box/display:flex）

    可以实现水平等分切割等.日后在研究,做个记录. 首先要声明:display:box,像谷歌浏览器要加前缀识别码:display:-webkit-box; 然后才开始使用其属性,同时也是要带上前缀识别码 ...

  8. 弹性盒布局display:flex详解

    一:弹性盒子 随着响应式设计的流行,网站开发者在设计网页布局时往往要考虑到页面在适配不同分辨率的浏览器时其内部组件位置大小都会产生变化,因此需要设计者根据窗口尺寸来调整布局,从而改变组件的尺寸和位置, ...

  9. CSS3盒模型display:-webkit-box;的使用

    box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没有得到 ...

随机推荐

  1. 谷歌浏览器 DEV Tools

    谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器.伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须的工具.大多数可能熟悉关于chorme的许多特点,例如使用c ...

  2. myeclipse2014集成SVN

    团队合作的项目肯定少不了版本控制,那么现在就看看myeclispe中是如何使用的吧. 开发环境:myeclipse 2014   java 8 tomcate 8 试了网上说的几种方法,都没有成功,最 ...

  3. Tomcat ClassLoader机制介绍

    本文旨在介绍JVM的类加载机制:同时分析Tomcat不能采用默认的加载机制的原因,并对其加载机制做了介绍. 1.JVM中的类加载机制 在Java2之后的版本中,类的加载采用的是一种称为双亲委派的代理模 ...

  4. Javascript样例之文档章节滚动全版（DOM）

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABBMAAAC5CAIAAAD1bOCRAAAMEUlEQVR4nO3d4XEbyREGUGRCZQDGcG

  5. JavaScript常用事件

    一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4   Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 on ...

  6. 13.第一个只出现一次的字符[FindFirstNotRepeatingChar]

    [题目] 在一个字符串中找到第一个只出现一次的字符.如输入abaccdeff,则输出b. [分析] 这道题是2006年google的一道笔试题. 看到这道题时,最直观的想法是从头开始扫描这个字符串中的 ...

  7. Java中必须了解的常用类

    1.Java的包装类 基本数据类型我们都很熟悉,例如:int.float.double.boolean.char等,基本数据类型不具备对象的特征,不能调用方法,一般能实现的功能比较简单,为了让基本数据 ...

  8. codeforces B. Routine Problem 解题报告

    题目链接:http://codeforces.com/problemset/problem/337/B 看到这个题目,觉得特别有意思,因为有熟悉的图片(看过的一部电影).接着让我很意外的是,在纸上比划 ...

  9. UVALive 7270 Osu! Master (阅读理解题)

    题目:传送门. 题意:阅读理解题,是一个osu的游戏,问得分.把题目翻译过来就是如果出现S或者BC后面跟的是1,ans就加1. #include <iostream> #include & ...

  10. 基数排序(radix sort)

    #include<iostream> #include<ctime> #include <stdio.h> #include<cstring> #inc ...