w3ctech

css3弹性盒布局

随着对html5的了解越来越多,css3的很多新属性也不断被挖掘.趁今天有空,跟大家分享一下css3弹性盒模型。让自己的理解也加深一下,相信高手在民间,望多指教。

css3弹性盒布局相对于表格灵活很多,在设计复杂的页面运用非常有益。可以轻松地实现当屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变。

不同于css2中盒布局以及内联布局,弹性盒布局不受浮动的影响的。但是其定义不足以支持那种需要根据用户代理从竖直切换成水平等变化而进行方向切换、大小调整、拉伸、收缩的引用组件。

比如:chrome下设置为水平轴伸缩,其他浏览器上也只能设置为水平伸缩。针对于响应式设计时很少用。

弹性盒布局中的术语

1).弹性容器:弹性容器也就是所有弹性元素的父容器。

2).弹性子元素:弹性容器的所有子元素都是弹性子元素。

3).轴:弹性盒布局中分主轴和侧轴。主轴是布局布局的方向,侧轴垂直于主轴。

4).方向: 弹性容器的主轴开始、主轴结束和侧轴开始、侧轴结束 边缘代表了弹性子元素排列的起始和结束位置。同时可以改变属性值来改变显示位置。

弹性盒布局语法经历的版本规范

1).新规范:最新版本规范的语法,即"display: flex"。

2).中间版本:2011 年的非官方规范的语法,即"display: flexbox"。

3).老规范:2009 年的规范的语法,即"display: box"。

弹性盒布局运用(以09版规范的语法为例)

[color=Red]注:兼容不同浏览器,css属性和属性值应加上代理前缀。如:webkit内核代理在设置display:box时 box应加上前缀display:-webkit-box[/color]

1).弹性容器的设置:display:box | inline-box

 box设置为块级弹性布局,inline-box设置为内联级弹性布局

2).布局流方向:box-orient:horizontal | vertical | inline-axis | block-axis

 horizontal:从左到右水平布局;vertical:从上到下垂直布局;inline-axis:弹性子元素沿着内联轴排列显示;block-axis:弹性子元素沿着块轴排列显示;

3).布局顺序:box-direction:normal | reverse

 normal:正常显示顺序;reverse:反向显示顺序

4).伸缩换行:box-lines:single | multiple

 single:弹性子元素一行或一列显示。内容溢出隐藏;multiple:弹性子元素可以多行或多列显示,内容溢出不隐藏。

5).主轴对齐:box-pack: start | end | center | justify

 start:弹性子元素向一行或一列的起始位置靠起;end:和start值相反;center:弹性子元素向一行或一列中的中间位置靠起;justify:弹性子元素平均分布在一行或一列中

6).侧轴对齐:box-align:start | end | center | baseline | stretch

 start:弹性子元素边缘放置在弹性容器的顶端,弹性容器的额外空间放置在容器底端;end:与start值相反;center:弹性子元素靠在一起,垂直居中于弹性容器;baseline:弹性子元素根据基线对齐;

 stretch:弹性子元素填充整个容器。

7).弹性:box-flex:number

 设置弹性子元素弹性大小

8).显示顺序:box-ordinal-group:

 box-ordinal-group默认值是1。主要用来设置弹性子元素在容器中的位置顺序序列号。弹性子元素排列将根据这个属性值从小到大排列,值越大越排在后面。

小例子一枚: <div class="toolbar flex-box-h"><a>轻微博</a><a>勾搭</a><a>我</a></div>

css代码

.toolbar{position:absolute;height: 50px;color: ##929292;width: 100%; box-sizing:border-box;left:0;bottom:0;background-color: #f7f7f8;border-top: 1px solid #c4c4c4;-webkit-backface-visibility: hidden;

backface-visibility: hidden;;}

.flex-box-h{display: box;display: -webkit-box;box-orient:horizontal;-webkit-box-orient:horizontal;box-direction:normal;-webkit-box-direction:normal;box-align:center;-webkit-box-align:center;}

.flex-box-h a{display: block;box-flex:1;-webkit-box-flex:1;font-size:14px;text-align: center;color:#929292;}

w3ctech微信

扫码关注w3ctech微信公众号

共收到8条回复

  • 需要调整一下。在代码前后加 ``` 来实现代码块展示。

    回复此楼
  • 第一次用,没认真看MarkDown

    回复此楼
  • 你可以编辑一下, @nelson

    回复此楼
  • 新规范和老规范有什么不同吗,我一直用的display:box

    回复此楼
  • 楼主,我有2个问题,之前有了解过一些,但是不太明白。

    • box-flex的值该怎么理解? 好像随意填写都可以的。
    • 在开发的时候,怎么更方便的写 -webkit- -moz- 之类的,老是容易忘和不确定对不对。
    回复此楼
  • box-flex是弹性子元素的伸缩比例,box-flex属性值为Number类型,可以指定也可以不指定,不指定时有父元素任意分配.我用的sublime开发的,安装Autoprefix css插件可以自动补全浏览器自带的前缀.@think2011

    回复此楼
  • 据我所知,新版和老版主要是语法上的区别!@windsolider

    回复此楼
  • 补充一下 比如一个box 总宽度是400px, 其布局为弹性盒模型布局,有div1、div2、div3三个弹性子元素,div1的box-flex为1,div2的box-flex为2,div3的box-flex为1;那么div1的宽度是:400(1/(1+2+1))=100;div2的宽度是:400(2/(1+2+1))=200;div1的宽度是:400*(1/(1+2+1))=100.还有一些情况,可能子元素比较任性,比如div2设置了width:300px;那么div1和div3的width只有在剩下的100px中分配了.@think2011

    回复此楼