移动端学习笔记（二）

弹性盒模型：

【主轴方向设置】

新版弹性盒模型：display:flex;

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

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

------------------------------------------------------

老版弹性盒模型：display: -webkit-box;

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

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

================================================================

【主轴元素排列方向】

新版弹性盒模型：display:flex;

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

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

================================================================

老版版弹性盒模型：display: -webkit-box;

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

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

==================================================================

【主轴上富余空间管理】

新版弹性盒模型：display:flex;

元素在主轴开始位置，富裕空间在主轴的结束位置：justify-content:flex-start;

元素在主轴结束位置，富裕空间在主轴开始位置:justify-content: flex-end;

元素在主轴中间,富裕空间在主轴两侧:justify-content: center;

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

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

----------------------------------------------------------------------------------

老版版弹性盒模型：display: -webkit-box;

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

元素在主轴结束位置，富裕空间在主轴开始位置:-webkit-box-pack: end;

元素在主轴中间,富裕空间在主轴两侧:-webkit-box-pack: center;

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

（新版特有的）

==================================================================

【侧轴上富余空间管理】

新版弹性盒模型：display:flex;

元素在侧轴开始位置，富裕空间在侧轴结束位置:align-items: flex-start;

元素在侧轴结束位置，富裕空间在侧轴开始位置:align-items: flex-end;

元素在侧轴中间位置，富裕空间在侧轴两侧:align-items: center;

根据侧轴方向上文字的基线对齐:align-items: baseline;(这里第二个子div设置行高了)

----------------------------------------------------------------------------------

新版弹性盒模型：display: -webkit-box;

元素在侧轴开始位置，富裕空间在侧轴结束位置：-webkit-box-align: start;

元素在侧轴结束位置，富裕空间在侧轴开始位置：-webkit-box-align: end;

元素在侧轴中间位置，富裕空间在侧轴两侧：-webkit-box-align: center;

==================================================================

【元素弹性空间】

flex-grow 属性用于设置或检索弹性盒的扩展比率

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                margin: 0;
            }
            #box{
                height: 200px;
                border: 1px solid #000;
                /*新版弹性盒模型*/
                /*display: flex;*/
 
                /*老版弹性盒模型*/
                display: -webkit-box;
            }
            #box div{
                /*新版*/
                /*flex-grow: 1;*/
 
                /*老版*/
                -webkit-box-flex:1;
 
                background: red;
                font-size: 30px;
                color: #fff;
            }
            #box div:nth-of-type(2){
                /*flex-grow: 3;*/
                background: olive;
                -webkit-box-flex: 3;
            }
            #box div:nth-of-type(3){
                /*flex-grow: 1;*/
                background: blueviolet;
                -webkit-box-flex: 1;
            }
            #box div:nth-of-type(4){
                /*flex-grow: 1;*/
                background: darkorange;
                -webkit-box-flex: 1;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </div>
    </body>
</html>

----------------------------------------------------------------------------------------------------------------

【元素具体位置的设置】

order 属性设置或检索弹性盒模型对象的子元素出现的順序

<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                  body{
                        margin: 0;
                  }
                  #box{
                        height: 200px;
                        border: 1px solid #000;
                        /*新版弹性盒模型*/
                        /*display: flex;*/
 
                        /*老版弹性盒模型*/
                        display: -webkit-box;
                  }
                  #box div{
                        width: 50px;
                        color: #fff;
                  }
                  #box div:nth-of-type(1){
                        /* 数值越小越靠前，可以接受0 或者负值 */
                        /*order:4;*/
                        background: red;
                        -webkit-box-ordinal-group: 4;
 
                        /* 数值越小越靠前， 最小值默认处理为1*/
                        /*-webkit-box-ordinal-group:-2;*/
                  }
                  #box div:nth-of-type(2){
                        /*order: 3;*/
                        background: yellow;
                        -webkit-box-ordinal-group: 3;
 
                  }
                  #box div:nth-of-type(3){
                        /*order: -1;*/
                        background: blue;
                        -webkit-box-ordinal-group: -1;
 
                  }
                  #box div:nth-of-type(4){
                        /*order: -2;*/
                        background: green;
                        -webkit-box-ordinal-group: -2;
 
                  }
            </style>
      </head>
      <body>
            <div id="box">
                  <div>1</div>
                  <div>2</div>
                  <div>3</div>
                  <div>4</div>
            </div>
      </body>
</html>

(新版)(老版)

posted @ 2017-06-23 17:43 波克比520 阅读(201) 评论(0) 编辑收藏举报

刷新页面返回顶部

波克比520

每天进步一点点\(^o^)/

移动端学习笔记（二）

公告