flex布局换行之后让底部一行左对齐
在用flex布局的时候遇到了下面这种问题,这是我的结构
<div class="videoMain"><div class="video" v-for="num in 8" :key="num"></div></div>
.videoMain{display: flex; flex-wrap: wrap;justify-content: space-between;align-content: flex-start;height: 100%;overflow-y: auto;.video{width: 342px;height: 210px;margin-bottom:10px;background-color: cyan;}}
当我使用 justify-content:space-between 或者 space-around 的时候
页面效果是这样的
很明显最后一行的三个元素我想让他左对齐,看到网上有说给父级元素加上伪类,我试了试
.videoMain{display: flex; flex-wrap: wrap;justify-content: space-between;align-content: flex-start;width: 100%;height: 100%;overflow-y: auto;.video{width: 342px;height: 210px;margin-bottom:10px;background-color: cyan;}i{width: 342px;}}.videoMain::after{content: '';flex: auto; // 或者1}
最后效果是这样的,最后一行都连上了(第一张图),也没有达到我想要的左对齐的效果,写margin-right之后和上面的又不对齐了(第二张图),不知道为什么别人说的就可以,有知道的也可以评论告诉我。
个人的解决方案
加了3个i标签,并把它的宽度设置的和.video的宽度一样,没有高度,这样的做的目的是最后一行差的给它补上,所以它会自动对齐,又因为没有写高度,所以页面中什么也不会显示
<div class="videoMain"><div class="video" v-for="num in 8" :key="num"></div><i v-for="num in 3" :key="num"></i></div>
i{width: 342px;}
这样就实现了底部和上面对齐的效果啦!
解释一下为什么我加了三个 i 标签
因为我的满行最多是五个div,底部多出一个div的时候,效果是没有影响的,当底部多出两个div的时候,显示在最前面和最后面的位置,这个不是我预期的效果,所以需要添加三个 i 标签来补齐,当底部是三个div的时候,同一行后面跟着两个 i 标签,下一行又有一个 i 标签,但是由于 i 标签没有高度,所以就和没有一样,视觉上就实现了我们想要的效果,无论页面的宽度怎么变,效果是不变的。(解释有点繁琐,不晓得大家有没有看懂,尽力了!)