当前位置:   article > 正文

flex布局换行后均匀分布_flex换行后均匀分布

flex换行后均匀分布

今天做一个需求的时候发现一个问题,原型需要做出这样的布局效果

首先想到的肯定是flex布局

  1. display: flex;
  2. justify-content: space-between;
  3. flex-wrap: wrap;

嗯,确实达到了效果,完美!!

但是当数据不是4的倍数的时候,就出现问题了

可以看到最后一排依然遵循均匀铺开在父级宽度里面,但这显然不是我们想要的效果

如果不适用justify-content: space-between;方法的话,就必须给每个子元素设置margin-right值,前提是要严格计算好尺寸

遗憾的是,我的页面是展现在pc端应用的浏览器中,宽度并不固定,拿不到确切的宽度,很难精确两端对齐

float方法也是同样的问题,需要设置margin-right,不够精确

最后收罗了好久,找到了一个办法,那就是给元素尾部多添加几个空白的子元素,强行撑开一列,但是不显示任何东西

可以看到,做后一行被元素占满了

最后需要说注意的是,空元素的个数最少也要是每一行个数减1,这里是4-1=3,不然没法完全撑开

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/凡人多烦事01/article/detail/234861
推荐阅读
相关标签
  

闽ICP备14008679号