100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > flex布局最后一行左对齐的处理

flex布局最后一行左对齐的处理

时间:2019-10-29 09:39:59

相关推荐

flex布局最后一行左对齐的处理

1、添加几个空item(用于大多数场景)

根据布局列数添加空item,比如每行最大n列,那么在最后添加n个空item即可

<html><style>.item {width: 32%;background-color: #00abff;height: 60px;margin-top: 10px;}.itemempty {height: 0px;width: 32%;}.box {display: flex;justify-content: space-between;flex-wrap: wrap;}</style><body><div class="box"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="itemempty"></div><div class="itemempty"></div><div class="itemempty"></div></div></body></html>

2.利于after(适用于每行列数确定的场景)

.box:after {content: "";flex: auto;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。