【flex布局】解决:使用justify-content排列,一行四个,最后一行少于四个时,排列不会与上面的对齐

<div class="content">
	<span class="item">1</span>
	<span class="item">2</span>
	<span class="item">3</span>
	<span class="item">4</span>
	<span class="item">5</span>
	<span class="item">6</span>
	<span class="item">7</span>
</div>
.content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	.item {
		width: calc(25% - 10px);
		height: 200px;
    margin-bottom: 20px;
    background: pink;
	}
}

以上是正常操作,然后就得到了:
在这里插入图片描述
利用伪类元素就可以达到我想要的效果,排列对齐:

.content:after {
  content: "";
  width: calc(25% - 10px);			// 宽就等于你设置的每个item的宽
}

在这里插入图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值