flex space-between最后一行对齐问题的解决方案
背景
常见的一个图文列表设计,通常是这样的,两端顶着容器,中间的间距平均分,如下图的某东商品列表的设计:
列表是这样自适应的,当视窗足够放多少个商品就放多少个,然后各个商品项目之间的间距平均分。由于每个人的视窗都可能不同,因此所看到的间距或者每一行的个数都会不同。
方案
想到这种设计,我们学过flex就知道,非常像flex的justify-content: space-between的效果,因此我们自然这样实现:
.flex {
list-style: none;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.demo1 > .flex__item {
flex-basis: 200px;
margin-top: 1rem;
text-align: center;
box-sizing: border-box;
} .demo1 > .flex__item img {
width: 100%;
}
<ul class="flex demo1">
<li class="flex__item">
<img src="http://via.placeholder.com/100" />
<p>
图片
</p>
</li>
<li class="flex__item">
<img src="http://via.placeholder.com/100" />
<p>
图片
</p>
</li>
<li class="flex__item">
<img src="http://via.placeholder.com/100" />
<p>
图片
</p>
</li>
<li class="flex__item">
<img src="http://via.placeholder.com/100" />
<p>
图片
</p>
</li>
<li class="flex__item">
<img src="http://via.placeholder.com/100" />
<p>
图片
</p>
</li>
</ul>
demo: https://jsbin.com/yulevutodo/edit?html,css,output
问题
我们看到效果,最后一行不正确,应该向左对齐才对。
大家有什么好的解决方案(为了保证兼容性,所以不希望用grid等)吗?
我有一个方案,但是总感觉不是最佳的,希望大家先自己想想,然后再看我的方案,免得被我带偏了,若有不错的方案,希望告知,多谢!
我的方案放在这边了:https://javascript.shop/2020/01/flex-space-between-last-row-alignment
flex space-between最后一行对齐问题的解决方案的更多相关文章
- flex布局,最后一行左对齐
拥抱flex 网上查找资料解决办法都是操作数据,个人感觉css问题还是用css来解决(当然问题不同,解决方案不同,这里只是针对某个问题的解决方法,不能解决所有问题,大家视情况而定,如果还是不行欢迎沟通 ...
- Linux下jetty报java.lang.OutOfMemoryError: PermGen space及Jetty内存配置调优解决方案
Linux下的jetty报java.lang.OutOfMemoryError: PermGen space及Jetty内存配置调优解决方案问题linux的jetty下发布程序后再启动jetty服务时 ...
- flex 垂直居中、两列对齐、自适应宽
flex 垂直居中 <div id="parent"> <div id="child"> </div> </div&g ...
- input框与img在同一行对齐
将input和img放同一行,img标签总是比input高出一个头,难看.后来在网站搜到最多的就是给img添加一个align="absmiddle"属性,这个方法似乎的确可行,但是 ...
- html 图标和文字一行对齐
原图: 效果图: 备注:vertical-align:middle <div> <p class="time tl-size12" style="pad ...
- display:flex; justify-content:space-between; 最后一行显示内容无法靠左显示
给父元素添加同每行展示列数一样(展示列表最多的)的子元素. 子元素设置样式: width:同子元素一样的width : height:0;
- IDEA 服务启动报:No buffer space available (maximum connections reached): connect的解决方案。
错误提示:严重: Error starting endpointjava.io.IOException: Unable to establish loopback connectionat sun.n ...
- 小图标文字对齐的终极解决方案demo
CSS代码: .icon { display: inline-block; width:20px; height:20px; background: url(delete.png) no-repeat ...
- 如何利用CSS代码使图片和文字在同一行显示且对齐
对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...
随机推荐
- 函数节流-歪说js
歪谈js 起因: 夜深人静,月朗星稀.'window.onresize 事件' 与 '浏览器'在大战300回合,console.log('1') 1s 十次,然后就结束了,一个悲伤的故事. 事实证明太 ...
- MongoDB geonear和文本命令驱动程序2.0
文本查询,q作为查询字符串: coll.FindAsync<Foo>(Builders<Foo>.Filter.Text(q)); 文本查询需要一个文本索引.要从C#创建代码, ...
- [CF235A] LCM Challenge - 贪心
找到3个不超过n的正整数(可以相同),使得它们的lcm(最小公倍数)最大. Solution 可以做得很优雅吧,但我喜欢(只会)暴力一点 根据质数密度分布性质,最后所取的这三个数一定不会比 \(n\) ...
- [AtCoder Code Festival 2017 QualB C/At3574] 3 Steps - 二分图染色,结论
给你一个n个点m条边的无向图,进行以下操作 如果存在两个点u和v,使得从u走三步能恰好到达v,那么在u和v之间连接一条边 重复这个操作直到不能再连接新的边,问最后有多少条边? n, m <= 1 ...
- [ZJOI2007] 矩阵游戏 - 二分图匹配
题意:问一个\(0-1\)方阵是不是非奇异的 其实我真的很想求行列式 #include <bits/stdc++.h> using namespace std; #define N 505 ...
- C语言-无符号数与有符号数不为人知的秘密
一.无符号数与有符号数 1.计算机中的符号位 数据类型的最高位用于标识数据的符号 -最高位为1,表明这个数为负数 -最高位为0,表明这个数为正数 #include <stdio.h> in ...
- 关于print()、sys.stdout、sys.stderr的一些理解
print() 方法的语法: print(*objects, sep=' ', end='\n', file=sys.stdout, flush=False) 其中file = sys.stdout的 ...
- JUC-分支合并框架
一.原理 Fork:把一个复杂任务进行分拆,大事化小 Join:把分拆任务的结果进行合并 ForkJoinPool 分支合并池 类比=> 线程池 ForkJoinTask ForkJo ...
- springboot之json传参(后台控制层如何接收和解析参数)
一般web端都是用form标签的形式进行表单提交到后台,后台控制层再用相应的实体对象去接收前端传来的json参数. 但是有时候前端界面很复杂,要传入后端的参数是各种标签里面的value值,这些值又是来 ...
- 生成器和迭代器_python
一.生成器简介(generator) 在进行较大数据的存储,如果直接存储在列表之中,则会可能造成内存的不够与速度的减慢,因为列表创建完是立即创建并存在的,而在python中生成器(generator) ...