css3中webkit-box的用法

  • A+
所属分类:CSS

webkit-box

1、之前要实现横列的web布局,通常就是float或者display:inline-block; 但是都不能做到真正的流体布局。至少width要自己去算百分比。

2.flexible box 就可以实现真正意义上的流体布局。只要给出相应属性,浏览器会帮我们做额外的计算。

提供的关于盒模型的几个属性:

box-orient                  子元素排列 vertical or horizontal

box-flex                       兄弟元素之间比例,仅作一个系数

box-align                     box 排列

box-direction             box 方向

box-flex-group          以组为单位的流体系数

box-lines

box-ordinal-group    以组为单位的子元素排列方向

box-pack以下是关于flexible box的几个实例

1、三列自适应布局,且有固定margin:

2、当一列定宽,其余两列分配不同比例亦可(三列布局,一列定宽,其余两列按1:2的比例自适应):

3、下面是一个常见的web page 的基本布局:

 

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
沉默的螺旋

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • avatar wys.me 0

      技术牛人吧。敬仰了。