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

2018-10-03 17:56:24来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:在HTML代码中使用freemarker

下一篇:CSS 小结笔记之图标字体(IconFont)