flex布局justify-content：space-between的排版问题
.div1{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: row;
width: 600px;
background-color: #e92332;
}
.div1 div{
width: 100px;
height: 80px;
margin: 50px;
border-radius: 10px;
text-align: center;
background-color: yellow;
}
</style>
<body>
<div class="div1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
使⽤flex布局的justify-content: space-between属性，结果显⽰为：
解决末尾中间留⽩，使其靠左分布的⽅法：给⽗容器使⽤伪元素占位，宽度设置为⼀个30%即可。
.div1:after{
html的flex布局
content: '';
width: 30%;
}

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