CSS的flex布局justify-content两端对齐布局让最后一行元素左对齐实现的两种方式
flex中使用两端对齐布局之后会出现,最后一行不忙一行的内容,也会变成两端对齐,然后你并不想要这样效果,你想要最后一行内容能够左对齐,下面讲一下解决方式,有两种办法:
效果如下:
样式基本排版
* { margin: 0; padding: 0; } li { list-style: none; } .box { width: 1000px; margin: 30px auto; border: 1px solid #ccc; } .box ul { display: flex; justify-content: space-between; flex-wrap: wrap; } .box ul li { width: 23%; height: 100px; background: #ccc; margin: 10px; box-sizing: border-box; }
html:
<div class="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
方法1:- 使用margin自适应的方法解决
.box ul li:last-child { margin-right: auto; }
给最后一个元素设置margin-right取值为auto,让该元素的右边距自适应剩余空间。
方法2:- 使用CSS中after(伪元素)来实现最后一行的左对齐
.box ul::after { content: ""; display: block; flex: 1;/* 与flex: auto;等效都是自适应剩余空间*/ }
控制台查看伪元素,可以看到伪元素进行了占位。
实现效果如下:
来源于: https://blog.csdn.net/qq_42876835/article/details/102831630
本文作者: Jasmine
本文链接: https://www.jianbaizhan.com/article/671
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!