弹性盒模型--新版与旧版比较

Posted fxyg

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了弹性盒模型--新版与旧版比较相关的知识,希望对你有一定的参考价值。

<style>

  body{

    margin:0;

  }

  #box{

    height:200px;

    border:1px solid #000;

    新版弹性盒模型

    /*display:flex;*/

    /*flex-direction:row;*/  设置主轴方向为水平方向

    /*flex-direction:column;*/  设置主轴方向为垂直方向

    /*flex-direction:row-reverse;*/  设置主轴方向为水平,元素排列为反序

    /*flex-direction:column-reverse;*/ 设置主轴方向为垂直,元素排列为反序

    /*justify-content:flex-start;*/ 设置元素在主轴开始位置,富裕空间在主轴的结束位置

    /*justify-content:flex-end;*/ 设置元素在主轴结束位置,富裕空间在主轴的开始位置

    /*justify-content:center;*/ 设置元素在主轴中间位置,富裕空间在主轴的两侧位置

    /*justify-content:space-between;*/ 设置富裕空间平均分配在每两个元素之间

    /*justify-content:space-around;*/ 设置富裕空间平均分配在每个元素两侧

    /align-items:flex-start;*/ *设置元素在侧轴开始位置,富裕空间在侧轴的结束位置

    /align-items:flex-end;*/ *设置元素在侧轴结束位置,富裕空间在侧轴的开始位置

    /align-items:center;*/ *设置元素在侧轴中间位置,富裕空间在测轴两侧

    /align-items:baseline;*/ 根据侧轴方向上文字的基线对齐*

 

   旧版弹性盒模型

    /*display:-webkit-box;*/ 注意:旧版一定要加-webkit-前缀不然无效

    /*-webkit-box-orient:horizontal;*/ 设置主轴方向为水平方向

    /*-webkit-box-direction:reverse;*/ 设置元素在主轴上排列为反序

    /*-webkit-box-direction:normal;*/ 设置元素在主轴上排列为正序   

    注意: -webkit-box-direction需要搭配-webkit-box-orient一起使用,不能单独使用,

    并且它的效果与新版有所区别,区别在新版连整体方向都反过来了,而旧版只是内容的排列反过来   

    /*-webkit-box-orient:vertical;*/ 设置主轴方向为垂直方向

    /*-webkit-box-pack:start;*/ 设置元素在主轴开始位置,富裕空间在主轴的结束位置

    /*-webkit-box-pack:end;*/ 设置元素在主轴结束位置,富裕空间在主轴的开始位置

    /*-webkit-box-pack:center;*/ 设置元素在主轴中间位置,富裕空间在主轴的两侧位置

    /*-webkit-box-pack:justify;*/  设置富裕空间平均分配在每两个元素之间

    /*-webkit-box-align:start;*/   设置元素在侧轴开始位置,富裕空间在侧轴的结束位置

    /*-webkit-box-align:end;*/   设置元素在侧轴结束位置,富裕空间在侧轴的开始位置

    /*-webkit-box-align:center;*/   设置元素在侧轴中间位置,富裕空间在侧轴的两侧位置

  }

</style>

<div  id="box">

  <div><div>

  <div><div>

     <div><div>

  <div><div>

</div>

 



以上是关于弹性盒模型--新版与旧版比较的主要内容,如果未能解决你的问题,请参考以下文章

旧版弹性盒

CSS旧版flex及兼容

03 弹性盒模型

弹性盒模型

弹性盒模型

CSS3弹性盒模型的布局理解