背景

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

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

方案

想到这种设计,我们学过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. Django生成脚本迁移文件时,报错django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 or newer is required; you have 0.9.3.

    一.本人环境:django:3.0.2, python:3.8.1,  pymysql:0.9.3 二.解决步骤: 1.django目录下找到 base.py文件: 2.在base.py文件中注释以下 ...

  2. R语言函数化学习笔记4

    条件语句和循环语句 当你说话时候用到了如果,此时条件出现了 举个条件函数的例子 sign_t<-function(x){ if(x>0){ return(1) }else if(x< ...

  3. 修改url中参数值

    1.一种方法function changeUrlArg(url, arg, val){ var pattern = arg+'=([^&]*)'; var replaceText = arg+ ...

  4. 在阿里云IIS服务器上安装证书

    在IIS服务器上安装证书 您可将下载的阿里云SSL证书安装到IIS服务器上,使您的IIS服务器支持HTTPS安全访问. 一.前提条件 申请证书时需要选择 系统自动创建CSR. 申请证书时如果选择手动创 ...

  5. 远程执行本地脚本_linux

    一.远程执行脚本 1.免机器指纹确认(无需填写yes/no) ssh -o StrictHostKeyChecking=no root@192.168.108.78 2.远程执行本地脚本 ssh -o ...

  6. K3/cloud执行计划插件示例

    public class AutoCheckInventory : IScheduleService { /// <summary>        /// 实际运行的Run 方法      ...

  7. linux - mysql 异常:Ignoring query to other database

    问题描述 Ignoring query to other database(忽略其他数据库查询) 问题原因 登录方式错误,登录命令用的是 “mysql -root -p”,应该用命令 “mysql - ...

  8. (转)java 虚拟机内存划分

    深入理解java虚拟机(一):java内存区域(内存结构划分)深入理解java虚拟机(二):java内存溢出实战  深入理解java虚拟机(三):String.intern()-字符串常量池深入理解j ...

  9. python 中 if __name__ == '__main__' 判断的作用

    假设这样一个a.py文件 def fun1(): ........ def fun2(): ......... if __name__=='__main__': ......#执行的一些语句 当你执行 ...

  10. Ueditor百度编辑器中 setContent()方法的使用

    百度编辑器Ueditor所提供的setContent()方法作用是:设置或者改变编辑器里面的文字内容或html内容 函数说明:setContent(string,boolean); 参数string ...