码迷,mamicode.com
首页 > 其他好文 > 详细

弹性盒子

时间:2015-04-29 07:05:18      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:

 

1. 弹性盒子语法

  首先对父元素进行声明:   .father{ display:box;}

  其次子元素三栏布局,比例1:3:1 :  

    .son1:{ box-flex:1;}

    .son2:{ box-flex:3;}

    .son3:{ box-flex:1;}

  如中间固定宽,两侧自适应:

    .son1:{ box-flex:1;}

    .son2:{ width:500px;}

    .son3:{ box-flex:1;}

  浏览器支持:webkit核心浏览器,火狐,IE10都支持带各自的前缀box-flex属性,

        Opera和IE9之前的IE浏览器不支持弹性盒子。

  兼容性代码如:

    .father{

      display:-webkit-box;

      display:-moz-box;  FF

      display:-ms-box;    IE10

      display:box;

    }

    .son_content{

      -webkit-box-flex:4;

      -moz-box-flex:4;

      -ms-box-flex:4;

      box-flex:4;

    }

  某些属性在弹性盒子中无效:

    多列模块中的column-*属性对弹性盒子无效

    float和clear对弹性元素无效,使用float会导致display属性集散为block。

    ertical-align对弹性元素的对齐无效

 

2. 操作元素(控制元素方向和对齐)

  控制子元素方向

  弹性盒子默认是横向布局,可以修改 box-orient 属性来确定子元素排列方向

    inline-axis 默认值

    inherit  继承父元素

    horizontal 与 inline-axis效果一样,子元素横排

    vertical 与 block-axis  让子元素竖排

  控制子元素对齐

    box-align   垂直方向对齐

      stretch  默认,表示拉伸,高度与父元素一致

      start  顶边

      end   底部

      center 居中

      baseline 

    box-pack 水平一流空间的使用

      start  默认,左边

      end   右边对齐

      center   中间对齐

      justify  两边对齐

  控制元素显示顺序

    box-direction 控制元素显示顺序

      normal  默认左右上下

      reverse  反转

      inherit    

     

   

弹性盒子

标签:

原文地址:http://www.cnblogs.com/zhangchen2015/p/4464547.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!