flex布局对齐方式
flex两端对齐_【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">
<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>
在线编辑预览：[flex布局平分三等分中间间距相等且两端对齐]
利⽤margin和padding的⽅式，也可以实现，但这个⽅式左侧没有顶到⽗容器最左侧
代码如下：
<style>
.wrap{
width: 800px;
margin: 0 auto;
padding-left: 30px;
padding-top: 30px;
background: #000033;
}
.clearfix::after{
display:block; overflow:hidden; clear:both; height:0; visibility:hidden; content:"."; }
.clearfix{
*zoom:1;
}
.item{
float: left;
width: calc(33.333% - 30px);
margin-right: 30px;
margin-bottom: 30px;
box-shadow: 0 0 1px #00FFCC;
height: 100px;
}
</style>
<div class="wrap clearfix">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

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