CSS的flex布局justify-content两端对齐布局让最后一行元素左对齐实现的两种方式

作者:Jasmine - 2020-07-17

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 许可协议。转载请注明出处!


 请勿发布不友善或者负能量的内容。审查将对发布广告等违规信息进行处罚!