100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > flex布局:解决justify-content: space-between;最后一行靠左对齐

flex布局:解决justify-content: space-between;最后一行靠左对齐

时间:2022-09-25 11:36:47

相关推荐

flex布局:解决justify-content: space-between;最后一行靠左对齐

场景:使用flex布局,每列数量不固定自适应,元素间距自适应,两端对齐

问题:最后一行元素不够时,会变成左右,如图

解决方法:放置占位元素,占位元素宽度与其他元素宽度一直,高度为0,

<!-- // 占位元素 --><div class="data-item temp" v-for="i in 6" :key="i"></div>

&.temp {height: 0;margin-bottom: 0;border: none;padding: 0;}

感觉不够可以多循环几个,没啥影响.

结果:

完美

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