在常用的flex布局中，当页面展示商品时，因为数据的不确定，导致justify-content设置成space-between，最后一行布局错乱

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4   <meta charset="UTF-8">

 5   <meta http-equiv="X-UA-Compatible" content="IE=edge">

 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">

 7   <title>Document</title>

 8   <style>

 9     .box{

10       display: flex;

11       flex-direction: row;

12       justify-content: space-between;

13       flex-wrap: wrap;

14       align-content: flex-start;

15       width: 450px;

16       background-color: antiquewhite;

17     }

18     .box div{

19       width: 100px;

20       height: 100px;

21       text-align: center;

22       line-height: 100px;

23       font-size: 30px;

24       color: aliceblue;

25     }

26     .box .div1{

27       background-color: gold;

28     }

29     .div2{

30       background-color: blueviolet;

31     }

32     .div3{

33       background-color: blue;

34     }

35     .div4{

36       background-color: gray;

37     }

38     .div5{

39       background-color: green;

40     }

41     .div6{

42       background-color: red;

43     }

44     .div7{

45       background-color: aquamarine;

46     }

47     .div8{

48       background-color: rebeccapurple;

49     }

50   </style>

51 </head>

52 <body>

53   <div class="box">

54     <div class="div1">1</div>

55     <div class="div2">2</div>

56     <div class="div3">3</div>

57     <div class="div4">4</div>

58     <div class="div5">5</div>

59     <div class="div6">6</div>

60     <div class="div7">7</div>

61     <div class="div8">8</div>

62     <div class="div4">4</div>

63     <div class="div5">5</div>

64     <div class="div6">6</div>

65     <div class="div7">7</div>

66     <div class="div8">8</div>

67     <div class="div4">4</div>

68     <div class="div5">5</div>

69     <div class="div6">6</div>

70     <div class="div7">7</div>

71     <div class="div8">8</div>

72     <div class="div1">1</div>

73

74   </div>

75 </body>

76 </html>

解决办法就是在小盒子后面添加标签 i 或者span标签，然后不设置高度，宽度和小盒子.box 下的div宽度一样就可以

问题来了设置几个呢，答案是设置该行的n-2个，比如说一行有4个那么写2个就可以了，如果有5个写3个就可以了

原理就是用 i 标签去占据位置，如果还不明白可以给i添加高度和背景色。再查看

然后再减去一个div第二个 i 就会上来

解决flex布局中justify-content设置成space-between后因数据问题导致最后一行布局错乱的更多相关文章

  1. Flex 4中组件背景设置（填充方式）group为例子

    以下以Group为例子讲述如何在Flex 4中填充背景颜色.图片: 1.图片填充方式: <s:Group x="0" y="0" height=" ...

  2. VMware下安装的CentOS7.5，设置成静态IP后ping不通外网

    网上很多都说用下面的方法即可解决 在CentOS中 ping www.baidu.com 无法ping通,可能原因是DNS没配置好 方法一: 修改vim /etc/resolv.conf 增加如下内容 ...

  3. ArcGIS Desktop中为图像设置成不显示背景色

    加载的栅格图层在arcgis中显示有黑色背景 方法一:如果有矢量边界的话,直接用矢量边界把黑色背景裁剪掉即可. 方法二: 如果是RGB三色: 这个只是不显示,并不改变原有的值 如果是值: 附:为影像数 ...

  4. Myeclipse中全部文件设置成UTF-8

    如果要使插件开发应用能有更好的国际化支持,能够最大程度的支持中文输出,则最好使 Java文件使用UTF-8编码.然而,Eclipse工作空间(workspace)的缺省字符编码是操作系统缺省的编码,简 ...

  5. vue 解决双向绑定中 父组件传值给子组件后 父组件值也跟着变化的问题

    说明: 近日开发中碰见一个很诡异的问题,  父组件动态的修改对象 data 中的值, 然后将这个对象 data 传给子组件, 子组件拿到后将 data 中的值 乘以 100 ,发现父组件中的值也跟着变 ...

  6. duilib中的V和H布局中滚动条问题

    转自博客:http://blog.csdn.net/damingg/article/details/41149037 首先看一段xml代码 [html] view plaincopy <?xml ...

  7. 从零开始学android开发-布局中 layout_gravity、gravity、orientation、layout_weight

    线性布局中,有 4 个及其重要的参数,直接决定元素的布局和位置,这四个参数是 android:layout_gravity ( 是本元素相对于父元素的重力方向 ) android:gravity (是 ...

  8. linux系统中查看己设置iptables规则

    1.iptables -L 查看filter表的iptables规则,包括所有的链.filter表包含INPUT.OUTPUT.FORWARD三个规则链. 说明:-L是--list的简写,作用是列出规 ...

  9. android 布局中 layout_gravity、gravity、orientation、layout_weight

    线性布局中,有 4 个及其重要的参数,直接决定元素的布局和位置,这四个参数是 android:layout_gravity ( 是本元素相对于父元素的重力方向 ) android:gravity (是 ...

  10. android布局中使用include及需注意点

    在android布局中,使用include,将另一个xml文件引入,可作为布局的一部分,但在使用include时,需注意以下问题: 一.使用include引入 如现有标题栏布局block_header ...

随机推荐

  1. idea :不支持发行版本11问题

    1.因为我是导入的其他人的项目来进行修改的,所以遇到了这个问题 2. 3. 4.

  2. 面向对象的练习总结（java）

    三次作业总结博客 l  前言 第一次题目集是我刚刚接触java所做的第一套习题,本次题目难度不大,题量较多,涉及的知识点主要是基础的语法知识,出题人的意图是让我们尽快熟悉java的语法,由于事先有c语 ...

  3. python——numpy

    NumPy(Numerical Python) 是 Python 语言的一个扩展程序库,支持大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库. import numpy a = num ...

  4. PHP做API开发该如何设计签名验证

    前言 开发过程中,我们经常会与接口打交道,有的时候是调取别人网站的接口,有的时候是为他人提供自己网站的接口,但是在这调取的过程中都离不开签名验证. 我们在设计签名验证的时候,请注意要满足以下几点: 可 ...

  5. 查看mmdetection中模型的配置信息

    方法一 可以直接打开mmdetection中的目录查看,/configs目录下都是对应的模型的配置 示例: 可以找到_base_目录下的这四个文件文件查看配置. 方法二 读取配置文件查看 在命令行中输 ...

  6. Mapper method 'org.lin.hms.dao.IndentDAO.insertIndent' has an unsupported return type: interface java.util.List

    出现这种错误,说明sql语句执行成功,只是返回类型出了问题. 解决办法: mapper文件中的update,delete,insert语句是不需要设置返回类型的,它们都是默认返回一个int ,所以把返 ...

  7. Jsp 总结

    JSP中的include的两种用法 1.两种用法 <@inlcude file ="header.jsp"/> 此时引入的是静态的jsp文件,它将引入的jsp中的源代码 ...

  8. 【BUUCTF]ACTF2020 新生赛Exec1write up

    根据题目分析,俺们要用ping命令! 打开靶机,输入127.0.0.1尝试提交,直接出现无过滤: 尝试管道符执行命令,常见管道符: 1.|(就是按位或),直接执行|后面的语句 2.||(就是逻辑或), ...

  9. c# form-data表单提交，post form上传数据、文件

    引用自:https://www.cnblogs.com/DoNetCShap/p/10696277.html 表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipa ...

  10. Django视图中的请求与响应

    一 请求 一 限制http请求 视图中的request,实际上是django源码中的HTTPRequest的子类WSGIRequest类的实例对象,主要由django对客户端请求的http协议报文进行 ...