思路:
通过display:flex,再将子元素设置flex:1,再包一层,通过设置padding来设置中间间距,可以达到想要多效果
padding-right(第1个盒子):padding-left(第2个盒子):padding-right(第2个盒子):padding-left(第3个盒子)=2:1:1:2
完整代码如下:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
<style>
.container{
width: 500px;
margin: 50px auto;
}
.container *{
box-shadow: 0 0 1px #ccc;
}
.wrap-flex{
display:flex;
text-align: center;
}
.wrap-flex-item{
flex:1;
}
.wrap-flex-item:nth-of-type(1){
padding-right:50px;
}
.wrap-flex-item:nth-of-type(2){
padding-left:25px;
padding-right:25px;
}
.wrap-flex-item:nth-of-type(3){
padding-left:50px;
}
.content{
background: #6cc;
padding: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="wrap-flex">
<div class="wrap-flex-item">
<div class="content">A</div>
</div>
<div class="wrap-flex-item">
<div class="content">B</div>
</div>
<div class="wrap-flex-item">
<div class="content">c</div>
</div>
</div>
</div>
</body>
</html>
第二种方法:修改了代码后,可以灵活平分4等分,核心代码如下:
/*第二种方法 灵活可以4个使用*/
.grid-part-4 .wrap-flex-item{
width: calc((100% - 75px)/4);
margin-right: 25px;
}
.grid-part-4 .wrap-flex-item:last-of-type{
margin-right:0;
}
在线编辑预览:flex布局平分三等分中间间距相等且两端对齐