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