css3弹性盒布局_html/css_WEB-ITnose

随着对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。主要用来设置弹性子元素在容器中的位置顺序序列号。弹性子元素排列将根据这个属性值从小到大排列,值越大越排在后面。

小例子一枚:

 

              轻微博

             勾搭

            我

         

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;}

最后是这样子的:

说明:这是一个简单的水平轴弹性盒布局,红色横线是主轴,红色竖线是侧轴。