解决flex布局space-between最后⼀⾏左对齐的⽅法⾸先看代码和效果↓
<style>
.main {
outline: 1px solid;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.main>div {
width: 100px;
height: 100px;
margin-bottom: 10px;
background-color: lightgreen;
}
flex布局对齐方式</style>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
可以看到最后⼀个div并没有在中间，⽽是在最后了
因为我们设置了justify-content为space-between，意思就是两边贴边
这时候我们可以给最外层div设置个伪元素，宽度和⾥⾯的div宽度⼀样就好了
只需要两⾏css就可以
.main:after {
content: "";
width: 100px;
}
这时候看效果
其实原理就是最后⼀个伪元素把他挤过来了
就算有9个也没影响，因为他的⾼度是0，看下图↓
到此这篇关于解决flex布局space-between最后⼀⾏左对齐的⽅法的⽂章就介绍到这了，更多相关flex布局space-between左对齐内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！

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