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