解决flex布局space-between最后一行左对齐的方法
发布时间：2020-07-20 15:54:25 作者：七度丢失的梦 
我要评论
我要评论这篇文章主要介绍了解决flex布局space-between最后一行左对齐的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
首先看代码和效果↓
<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;
}
</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左对齐内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
这篇文章主要介绍了flex弹性盒布局最后一行左对齐的实现思路，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-08
css3 flex布局 justify-content:space-between 最后一行左对齐
这篇文章主要介绍了css3 flex布局 justify-content:space-between 最后一行左对齐,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的2020-01-02
这篇文章主要介绍了让CSS flex布局最后一行列表左对齐的N种方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编2020-07-23
最新评论