-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负值用完，文字继续增多的话还是会超出屏幕：
