背景

常见的一个图文列表设计,通常是这样的,两端顶着容器,中间的间距平均分,如下图的某东商品列表的设计:

列表是这样自适应的,当视窗足够放多少个商品就放多少个,然后各个商品项目之间的间距平均分。由于每个人的视窗都可能不同,因此所看到的间距或者每一行的个数都会不同。

方案

想到这种设计,我们学过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最后一行对齐问题的解决方案的更多相关文章

  1. flex布局,最后一行左对齐

    拥抱flex 网上查找资料解决办法都是操作数据,个人感觉css问题还是用css来解决(当然问题不同,解决方案不同,这里只是针对某个问题的解决方法,不能解决所有问题,大家视情况而定,如果还是不行欢迎沟通 ...

  2. Linux下jetty报java.lang.OutOfMemoryError: PermGen space及Jetty内存配置调优解决方案

    Linux下的jetty报java.lang.OutOfMemoryError: PermGen space及Jetty内存配置调优解决方案问题linux的jetty下发布程序后再启动jetty服务时 ...

  3. flex 垂直居中、两列对齐、自适应宽

    flex 垂直居中 <div id="parent"> <div id="child"> </div> </div&g ...

  4. input框与img在同一行对齐

    将input和img放同一行,img标签总是比input高出一个头,难看.后来在网站搜到最多的就是给img添加一个align="absmiddle"属性,这个方法似乎的确可行,但是 ...

  5. html 图标和文字一行对齐

    原图: 效果图: 备注:vertical-align:middle <div> <p class="time tl-size12" style="pad ...

  6. display:flex; justify-content:space-between; 最后一行显示内容无法靠左显示

    给父元素添加同每行展示列数一样(展示列表最多的)的子元素. 子元素设置样式: width:同子元素一样的width : height:0;

  7. IDEA 服务启动报:No buffer space available (maximum connections reached): connect的解决方案。

    错误提示:严重: Error starting endpointjava.io.IOException: Unable to establish loopback connectionat sun.n ...

  8. 小图标文字对齐的终极解决方案demo

    CSS代码: .icon { display: inline-block; width:20px; height:20px; background: url(delete.png) no-repeat ...

  9. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

随机推荐

  1. 深入理解IP之CIDR

    现代IP基于分类的IP越来越少,而基于CIDR的方式的越来越多.那么可以看下面这篇文章: https://www.cnblogs.com/hark0623/p/6547432.html 这篇文章对CI ...

  2. 使用U盘装Windows10系统

    一.装备工作 使用U盘装系统需要准备以下工具: 8G左右的U盘一个.由于制作启动盘会删除U盘的所有数据,所以重要资料请提前备份. 系统的镜像文件.这里我推荐MSDN, 我告诉你.这里下载的镜像和官方的 ...

  3. 洛谷P1551 亲戚 (并查集模板题)

    链接 https://www.luogu.org/problemnew/show/P1551 代码 #include<bits/stdc++.h> using namespace std; ...

  4. C++-hihoCode1545-小Hi和小Ho的对弈游戏[树上Nim]

    #include <set> #include <map> #include <cmath> #include <queue> #include < ...

  5. 在SQL2005中修改数据库名称

    SQL Server 2005中有个数据库HT_WisdomDataBaseCenter,现在要将其改名为HT_NBSBOneNetcs1步骤:(1) 分离数据库:打开management studi ...

  6. Shashlik Cooking

    Long story short, shashlik is Miroslav's favorite food. Shashlik is prepared on several skewers simu ...

  7. echart--自己写的例子

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  8. jqGrid colModel 参数(来自中文手册)

    jqGrid colModel 参数 ColModel 是jqGrid里最重要的一个属性,设置表格列的属性. 属性 数据类型 备注 默认值 align string left, center, rig ...

  9. C++-随机数的产生

    一.随机数 以前学C语言的时候感觉随机数没啥用的,现在想想是自己无知啦,在帮人做一个项目的时候发现随机数还是相当有用的,我们可以利用随机数来生成大量的测试数据. 有两种方法可以让你的程序每次运行结果不 ...

  10. org.apache.catalina.connector.ClientAbortException: java.io.IOException: 您的主机中的软件中止了一个已建立的连接。

    日志文件中有“java.io.IOException: 您的主机中的软件中止了一个已建立的连接.”错误 org.apache.catalina.connector.ClientAbortExcepti ...