當(dāng)我們在父元素設(shè)置justify-content: space-between;元素會實現(xiàn)兩端對齊,但最后一行會如圖所示蕴轨,不大美觀
/*父元素*/
.wrapper{
display: flex;
justify-content: space-between;
flex-wrap:wrap;
}
/*子元素*/
wrapper .item{
width:190rpx;
height:120rpx;
border-radius:10rpx;
text-align: center;
line-height:120rpx;
border:1rpx solid #333;
margin-bottom:20rpx;
}
而實際我們想要實現(xiàn)的效果是下面這樣的港谊,要怎么解決呢?
解決方法: 在父元素的after偽元素中寬度設(shè)置成與item的寬一樣即可
&:after {
content: "";
width:190rpx;
}
另外我試了網(wǎng)上說的另外的方法尺棋,實現(xiàn)效果只是左對齊封锉,而且中間間隔并不好控制
&:after {
content: "";
flex: auto;
}
flex:auto.png