flex布局换行后均匀分布

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

首先想到的肯定是flex布局

display: flex;
justify-content: space-between;
flex-wrap: wrap;

嗯，确实达到了效果，完美！！

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

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

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

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

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

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

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

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

flex布局换行后均匀分布相关推荐

（转）flex布局换行后间隙问题
问题描述今天遇到flex布局换行后产生间隙的问题,本来预期得到以下结果 pre.PNG 具体实现如下: <!DOCTYPE html> <html lang="en&qu ...
html flex布局换行,flex布局换行后间隙问题
问题描述今天遇到flex布局换行后产生间隙的问题,本来预期得到以下结果 pre.PNG 具体实现如下: flex布局换行后间隙问题 html,body{ width: 100%; height: 1 ...
flex布局换行间距有很大缝隙
使用flex布局换行的时候 flex-wrap: wrap; 行与行之前有很大的空隙可以使用 // align-content: flex-start;解决问题下面展示一些内联代码片. flex- ...
flex布局换行之后让底部一行左对齐
flex布局换行之后让底部一行左对齐在用flex布局的时候遇到了下面这种问题,这是我的结构 <div class="videoMain"><div class= ...
flex布局换行盒子上下有缝隙
flex布局换行盒子上下有缝隙可能是其他盒子有高度的原因撑开了 display: flex; flex-wrap: wrap; align-content: flex-start;//侧轴应该就好 ...
html flex布局换行,flex布局下换行兼容问题
最近使用flex布局大体上都没问题,就是一些版本都存在一点兼容问题尤其是换行的时候,我们来看下面的Less 文件! 各大浏览器兼容都写好了!但是还是存在换行问题 ,看列子 .flex-block() ...
flex布局换行后有缝隙怎么解决
原本使用flex布局想要得到这种布局但是确得到如下结果碰见这种情况不要慌,我们只需要在设置display:flex的盒子加上一句代码就可以了,如下: align-content: flex-sta ...
html flex布局换行,flex布局中的换行究竟是怎么使用的？
该楼层疑似违规已被系统折叠隐藏此楼查看此楼图片布局实现测试1 *{padding: 0;margin: 0;} html,body{ /*height: 100%;*/ background-co ...
flex布局——换行——多行换行
布尔flex displaya:flex 改变主轴:flex-direction:row-reversc center:主轴结束位置 space-between:两端对齐 flex-and:主轴结束的 ...

flex布局换行后均匀分布

flex布局换行后均匀分布相关推荐

最新文章

热门文章