-webkit-box使用方法和示例

-webkit-box用于移动动设备自适应布局,实现横列的流体布局
1、在需要实现流体布局的子元素的直接父元素中添加属性:display:-webkit-box;
2、需要对父元素按比例划分成块的,需要在子元素中添加属性:-webkit-box-flex:1;  width:0;
     width:0;  =>包含子元素自身的内容块长度来划分父元素,否则会除去子元素内容所占的长度,剩余空白所占的比例;
     -webkit-box-flex:1;  =>只有包含此属性的子元素块才能按比例划分父元素
3、子元素的内容相对于父元素块垂直居中,需要在其父元素中添加属性:-webkit-box-align:center;

例:
<html>
    <head style="background:red;">
        <meta http-equiv="Content-Type" content='text/html; charset="utf-8"' />
        <style>
            .box-parent{
    display:-webkit-box;
    -webkit-box-align:center;    //v-center
    }
            .box-son{
    display:-webkit-box;
    -webkit-box-flex:1;
    -webkit-box-align:center;
    }
            .circle{
    background-color:red;
    height:20px;
    width:20px;
    border-radius:20px;    
    }
              .line{
    width:100%;
    height:1px;
    background-color:black;
    }

             .box-father{
    display:-webkit-box;
    -webkit-box-pack:center;
    }
             .box-chidren{
    width:0;
    -webkit-box-flex:2;
    text-align:center;
    }
             box-chidrenL{
    width:0;
    -webkit-box-flex:1;
    }
             .box-chidrenR{
    width:0;
    -webkit-box-flex:1;
    text-align:right;
    }
       </style>
    </head>
        <div class = 'box-parent'>    
    <div class='box-son'>       //占父元素的三分之一
          <div class='circle'></div>
          <div class = 'line'></div>
    </div>
    <div class='box-son'>      //占父元素的三分之一
          <div class='circle'></div>
          <div class = 'line'></div>
    </div>
    <div class='box-son'>       //占父元素的三分之一
          <div class='circle'></div>
          <div class = 'line'></div>
    </div>
            <div class='circle'></div>     //没有-webkit-box-flex属性,不划分父元素
        </div>
        <div class = 'box-father'>
    <div class='box-chidrenL'>   //占父元素的六分之一
          开始节点
    </div>
    <div class='box-chidren'>     //占父元素的六分之二
          中间节点
    </div>
    <div class='box-chidren'>      //占父元素的六分之二
          中间节点
    </div>
    <div class='box-chidrenR'>    //占父元素的六分之一
          结束节点
    </div>
        </div>
        <script type="text/javascript">
        </script>
    </body>
</html>

结果图:

二、设置最后一个节点下面的文字不换行,当文字过多时,会导致文字超出屏幕
缓解办法:
将文字单独放入span标签内,并设置属性margin-left为负值且不换行,
例如:
.divtextR{
      margin-left:-50px;   
      white-space: nowrap;
}
<div class='box-chidrenR'>   
        <span class="divtextR">结束节点</span>
</div>
由于最后节点box-chidrenR内设置的属性为text-align:right,因此文字会先满足margin-right条件,即:
当文字增多时,文字块会向左填充,直到到达设置的负值(例如:-50px)处;
当文字继续增多时,文字块还是会向右填充,超出屏幕;
因此,此方法可以解决文字稍微多,但是设置margin-left负值后,文字又不会多到不超出屏幕的情况。

结果图:
1、文字块向左填充,不超出屏幕:

2、margin-left负值用完,文字继续增多的话还是会超出屏幕:

 

 

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页