Flex布局之box-flex
2015-12-03 22:57
507 查看
box-flex的写法比flex的写法要复杂一些,兼容性的前缀要多带几个,真希望有一天flex布局能够纳入w3c标准啊!
box-orient, box-direction, box-align, box-pack, box-lines
box-orient
box-orient用来确定子元素的方向。是横着排还是竖着走。可选的值有:
其中,inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的,让子元素横排;而vertical与block-axis的表现也是一致的,让元素纵列。
box-direction
box-direction是用来确定子元素的排列顺序,可选值有:
box-align
box-align与box-pack都是决定盒子内部剩余空间怎么使用的。在行为效果上就是表现为“对齐”。
其中box-align决定了垂直方向上的空间利用,也就是垂直方向上的对齐表现。为了便于记忆,我们可以拿来和CSS2中的vertical-align隐射记忆,两者都有”align”,都是都是垂直方向的对齐;而剩下的box-pack就是水平方向的了。
box的可选参数有:
其中stretch为默认值,为拉伸,也就是父标签高度多高,其孩子元素的高度就多高。
box-pack
box-pack决定了父标签水平遗留空间的使用,其可选值有:
就大部分的行为表现来说分别对应text-align属性的值:left | right | center | justify;但是,之所以box-pack不使用”left”, 而是”start”,是因为box-direction属性,这玩意可以反转原本的排列,原本的“左对齐”反转后结果是“右对齐”了,此时”left”显然就词不达意了,所以使用”start”更具有概括性,就是与父标签的起始位置对齐,从而不会产生语义与行为上的困扰。
box-lines
box-lines是用来决定子元素是可以换行显示呢?还是就算挤出油还是单行显示。两个可选值:
其中single是默认值,表示死活不换行。
==================更新于2016年3月25日=============
先写几个div,给上不同的颜色
然后给body加上display:box和box-orient属性
结果如下
比什么display:inline-block强多了。
再给body加上box-direction属性,可以使色块反向
box-direction的属性值要么是normal要么就是reverse,inherit什么的不重要。
ordinal的意思是序数词,顺序数的意思,而box-ordinal-group的意思就是指子元素在box中的顺序位置
我们可以这样来设置box-ordinal-group
再来讲box-flex这个属性
box-flex属性能够灵活地控制子元素在盒子中的显示空间(宽度和高度),即子元素在盒子中所占的面积。
这个属性很重要,它解决了传统设计中习惯使用百分比定义弹性布局的弊端。
box-flex的值是一个number,可以是整数或者小数。
当盒子中包含多个定义了box-flex属性的子元素时,浏览器会把这些子元素的box-flex属性值相加,然后根据它们各自的值占总值的比例来分配盒子剩余的空间。
先讲下大概的思路
在使用box-flex之前,我们要把父容器的display设置成box
关于display:box的兼容性写法请参看flexbox兼容性写法,这里不具体说明。
然后就可以给father的boys们分房子了
大概的结果会是这个样子
这样的分法是比较均衡的,还有一些不均衡的分法,比如三儿子先指定要多大的空间,大儿子和二儿子再分剩下来的空间。
有了这样的思路,我们可以写一个比较完整的CSS Demo
当弹性与非弹性元素混合排版时,有可能会出现所有子元素的尺寸大于或小于盒子的尺寸,从而出现盒子空间不足或者富余的情况,这时就需要一种方法来管理盒子的空间。
如果子元素的总尺寸小于盒子的尺寸,则可以使用box-align和box-pack属性进行管理。
box-pack属性可以在水平方向上对盒子的富余空间进行管理。
---start:所有子元素都显示在盒子的左侧,富余空间在右侧。
---end:与start相反。
---justify:富余的空间在子元素之间平均分配。
---center:富余的空间在盒子的两侧平均分配。
box-align属性可以在垂直方向上对盒子的富余空间进行管理。
---start:所有子元素沿盒子的上边缘排列,都显示在盒子的上部,富余的空间显示在盒子底部。
---end:与start相反。
---center:富余的空间在盒子的上下两侧平均分配,上面下面各一半。
---baseline:所有盒子沿着它们的基线排列,富余的空间可前可后显示。
---stretch:每个子元素的高度被调整到适合盒子的高度显示。stretch是延伸的意思。
举个栗子
这也是一个很好的居中方法。
box-pack和box-align会导致盒子内的元素很容易跑出盒子的包围圈,这种现象被称为空间溢出。
我们可以用overflow来处理溢出,当然,flexbox也提供了专门的属性来进行空间溢出管理,那就是:box-lines。
它有两个属性值:
single:所有子元素都单行或者单列显示。
multiple:所有子元素都多行或者多列显示。
文章来源:
张鑫旭的博客
http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex%E5%B1%9E%E6%80%A7%EF%BC%8C%E7%84%B6%E5%90%8E%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B/
<!DOCTYPE html> <html> <head> <style> .container{ width:80%; margin:auto; min-height:500px; display: -moz-box; display: -webkit-box; display: box; } .item-1{ -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; } .item-2{ -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; } .item-3{ -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; } </style> </head> <body> <div class="container"> <div class="item item-1">item 1</div> <div class="item item-2">item 2</div> <div class="item item-3">item 3</div> </div> </body> </html>
box-orient, box-direction, box-align, box-pack, box-lines
box-orient
box-orient用来确定子元素的方向。是横着排还是竖着走。可选的值有:
horizontal | vertical | inline-axis | block-axis | inherit
其中,inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的,让子元素横排;而vertical与block-axis的表现也是一致的,让元素纵列。
box-direction
box-direction是用来确定子元素的排列顺序,可选值有:
normal | reverse | inherit
box-align
box-align与box-pack都是决定盒子内部剩余空间怎么使用的。在行为效果上就是表现为“对齐”。
其中box-align决定了垂直方向上的空间利用,也就是垂直方向上的对齐表现。为了便于记忆,我们可以拿来和CSS2中的vertical-align隐射记忆,两者都有”align”,都是都是垂直方向的对齐;而剩下的box-pack就是水平方向的了。
box的可选参数有:
start | end | center | baseline | stretch
其中stretch为默认值,为拉伸,也就是父标签高度多高,其孩子元素的高度就多高。
box-pack
box-pack决定了父标签水平遗留空间的使用,其可选值有:
start | end | center | justify
就大部分的行为表现来说分别对应text-align属性的值:left | right | center | justify;但是,之所以box-pack不使用”left”, 而是”start”,是因为box-direction属性,这玩意可以反转原本的排列,原本的“左对齐”反转后结果是“右对齐”了,此时”left”显然就词不达意了,所以使用”start”更具有概括性,就是与父标签的起始位置对齐,从而不会产生语义与行为上的困扰。
box-lines
box-lines是用来决定子元素是可以换行显示呢?还是就算挤出油还是单行显示。两个可选值:
single | multiple
其中single是默认值,表示死活不换行。
==================更新于2016年3月25日=============
box-align | 子元素在盒子内垂直方向上的空间分配方式 |
box-pack | 子元素在盒子内水平方向上的空间分配方式 |
box-direction | 盒子的显示顺序 |
box-flex | 子元素在盒子内的自适应尺寸 |
box-flex-group | 自适应子元素组群 |
box-lines | 子元素分列显示,空间溢出显示 |
box-ordinal-group | 子元素在盒子内的显示位置 |
box-orient | 盒子分布的坐标轴 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>box-orient</title> <style type="text/css"> div { height:50px; } #box1 { background:#F6F; } #box2 { background:#3F9; } #box3 { background:#FC0; } </style> </head> <body> <div id="box1">盒子1</div> <div id="box2">盒子2</div> <div id="box3">盒子3</div> </body> </html>
然后给body加上display:box和box-orient属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>box-orient</title> <style type="text/css"> div { height:50px; } #box1 { background:#F6F; } #box2 { background:#3F9; } #box3 { background:#FC0; } body{ display : -moz-box; display : -webkit-box; display : box; box-orient: horizontal; -mozbox-box-orient: horizontal; -webkit-box-orient:horizontal; } </style> </head> <body> <div id="box1">盒子1</div> <div id="box2">盒子2</div> <div id="box3">盒子3</div> </body> </html>
结果如下
比什么display:inline-block强多了。
再给body加上box-direction属性,可以使色块反向
body{ display : -moz-box; display : -webkit-box; display : box; box-orient: horizontal; -mozbox-box-orient: horizontal; -webkit-box-orient:horizontal; -moz-box-direction : reverse; -webkit-box-direction : reverse; box-direction : reverse; }
box-direction的属性值要么是normal要么就是reverse,inherit什么的不重要。
ordinal的意思是序数词,顺序数的意思,而box-ordinal-group的意思就是指子元素在box中的顺序位置
我们可以这样来设置box-ordinal-group
#box1 { -moz-box-ordinal-group : 2; -webkit-box-ordinal-group : 2; box-ordinal-group : 2; } #box2 { -moz-box-ordinal-group : 3; -webkit-box-ordinal-group : 3; box-ordinal-group : 3; } #box3 { -moz-box-ordinal-group : 1; -webkit-box-ordinal-group : 1; box-ordinal-group : 1; } #box4 { -moz-box-ordinal-group : 4; -webkit-box-ordinal-group : 4; box-ordinal-group : 4; }
再来讲box-flex这个属性
box-flex属性能够灵活地控制子元素在盒子中的显示空间(宽度和高度),即子元素在盒子中所占的面积。
这个属性很重要,它解决了传统设计中习惯使用百分比定义弹性布局的弊端。
box-flex的值是一个number,可以是整数或者小数。
当盒子中包含多个定义了box-flex属性的子元素时,浏览器会把这些子元素的box-flex属性值相加,然后根据它们各自的值占总值的比例来分配盒子剩余的空间。
先讲下大概的思路
在使用box-flex之前,我们要把父容器的display设置成box
#father { display: box; }
关于display:box的兼容性写法请参看flexbox兼容性写法,这里不具体说明。
然后就可以给father的boys们分房子了
#first_boy { box-flex: 2; } #second_boy { box-flex: 1; } #three_boy { box-flex: 1; }
大概的结果会是这个样子
这样的分法是比较均衡的,还有一些不均衡的分法,比如三儿子先指定要多大的空间,大儿子和二儿子再分剩下来的空间。
#first_boy { box-flex: 2; } #second_boy { box-flex: 1; } #three_boy { width: 300px; }
有了这样的思路,我们可以写一个比较完整的CSS Demo
#box { margin:auto; text-align:left; width:1000px; overflow:hidden; } #box { display : -moz-box; display : -webkit-box; display : box; box-orient: horizontal; -mozbox-box-orient: horizontal; -webkit-box-orient:horizontal; } #box1 {width:200px;} #box2, #box3 { border:solid 1px #CCC; margin:2px; } #box2 { -moz-box-flex: 4; -webkit-box-flex: 4; box-flex: 4; } #box3 { -moz-box-flex: 2; -webkit-box-flex: 2; box-flex: 2; }
当弹性与非弹性元素混合排版时,有可能会出现所有子元素的尺寸大于或小于盒子的尺寸,从而出现盒子空间不足或者富余的情况,这时就需要一种方法来管理盒子的空间。
如果子元素的总尺寸小于盒子的尺寸,则可以使用box-align和box-pack属性进行管理。
box-pack属性可以在水平方向上对盒子的富余空间进行管理。
---start:所有子元素都显示在盒子的左侧,富余空间在右侧。
---end:与start相反。
---justify:富余的空间在子元素之间平均分配。
---center:富余的空间在盒子的两侧平均分配。
box-align属性可以在垂直方向上对盒子的富余空间进行管理。
---start:所有子元素沿盒子的上边缘排列,都显示在盒子的上部,富余的空间显示在盒子底部。
---end:与start相反。
---center:富余的空间在盒子的上下两侧平均分配,上面下面各一半。
---baseline:所有盒子沿着它们的基线排列,富余的空间可前可后显示。
---stretch:每个子元素的高度被调整到适合盒子的高度显示。stretch是延伸的意思。
举个栗子
body { margin:0; padding:0; display : -moz-box; display : -webkit-box; display : box; -moz-box-orient : horizontal; -webkit-box-orient : horizontal; box-orient : horizontal; -moz-box-pack : center; -webkit-box-pack : center; box-pack : center; -moz-box-align : center; -webkit-box-align : center; box-align : center; background: #04082b url(images/map1.jpg) no-repeat top center; }
这也是一个很好的居中方法。
box-pack和box-align会导致盒子内的元素很容易跑出盒子的包围圈,这种现象被称为空间溢出。
我们可以用overflow来处理溢出,当然,flexbox也提供了专门的属性来进行空间溢出管理,那就是:box-lines。
它有两个属性值:
single:所有子元素都单行或者单列显示。
multiple:所有子元素都多行或者多列显示。
文章来源:
张鑫旭的博客
http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex%E5%B1%9E%E6%80%A7%EF%BC%8C%E7%84%B6%E5%90%8E%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B/
相关文章推荐
- Shell学习笔记 - 正则表达式
- 黑马程序员—javaSE—异常
- 我的思维方式和我的性格
- Android进程和线程 --消息队列模型--ThreadLocal (3)(2015-12-02 19:41)
- 冰山
- 使用Python开发windows GUI程序入门实例
- 《JavaScript权威指南》学习笔记 第六天 开始学习DOM了。
- C语言实现封装
- 解决itunes启动后一直显示 正在访问iTunes Store 的问题
- 项目跟进经验总结
- 黑马程序员—javaSE—Mep集合
- 美学和音乐
- 按钮设置文字图片排版
- 基于MLlib的机器学习--协同过滤与推荐
- 五子棋总结
- C#_is运算符,new运算符,typeof运算符
- JDBC 对 结果集的处理
- 南大软院二十一天成神计划
- C++拷贝构造函数详解 http://blog.csdn.net/lwbeyond/article/details/6202256
- 了解String类的intern()方法