-webkit-box使用方法和示例

最新推荐文章于 2023-05-08 23:46:33 发布

高冷喵

最新推荐文章于 2023-05-08 23:46:33 发布

阅读量8.9k

点赞数 3

分类专栏：前端文章标签： css HTML

本文链接：https://blog.csdn.net/yhdyy123/article/details/100673562

版权

前端专栏收录该内容

1 篇文章 2 订阅

订阅专栏

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

高冷喵

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
-webkit-box使用方法和示例

-webkit-box用于移动动设备自适应布局，实现横列的流体布局1、在需要实现流体布局的子元素的直接父元素中添加属性：display:-webkit-box;2、需要对父元素按比例划分成块的，需要在子元素中添加属性：-webkit-box-flex:1; width:0; width:0; =>包含子元素自身的内容块长度来划分父元素，否则会除去子元素内容所占的长度，剩余空...
复制链接

扫一扫

专栏目录