【CSS】flex布局平分三等分中间间距相等且两端对齐
思路：
通过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">
text align center<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;
}
在线编辑预览：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。