欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-21 10:58:21
场景:使用flex布局,每列数量不固定自适应,元素间距自适应,两端对齐问题:最后一行元素不够时,会变成左右,如图解决方法:放置占位元素,占位元素宽度与其他元素宽度一直,高度为0,
......

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

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

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

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

<!-- // 占位元素 -->
<div class="data-item temp" v-for="i in 6" :key="i"></div>
&.temp {
          height: 0;
          margin-bottom: 0;
          border: none;
          padding: 0;
        }

 

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

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

完美

本文地址:https://blog.csdn.net/gouwa626/article/details/107379144

相关标签: flex布局 flex