在常用的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. 下载并安装Swagger-ui和Swagger-edit

    1. github上下载好Swagger-ui和Swagger-edit文件 https://github.com/swagger-api/swagger-ui https://github.com/ ...

  2. 微信小程序安装vant

    1.初始化npm并安装 npm init -y npm install 2.修改project.config.json { "setting": { "packNpmMa ...

  3. [Cisco][GNS3]Install IOU device in GNS3

    1. 下載並安裝GNS3 下載位置 https://gns3.com/software 安裝 gns3-all-in-one 部屬GNS3 VM至virtualbox 下載並安裝VIX API htt ...

  4. java.Text.ParseException:Unparseable date:"undefined 00:00:00"

    request.getParameter() 获取的日期要toString一下再parse,否则就会报这个异常

  5. Halcon代码导出到.net FrameWork/WPF

    1. 应用背景 在工业项目中,往往需要使用机器视觉结合人机界面开发特定的,面向工艺的项目.机器视觉中,Halcon无疑是功能强大的,能快速应用到项目的视觉产品,而WPF则是解决人机界面的利器.因此了解 ...

  6. .net创建、发布、引用webservice项目

    创建webservice引用 增加代码: 运行如下: 之后就可以发布我们的项目了,右击项目,选择发布: 此地址不要选择项目地址,另外创建一个地址: 至此,发布成功,接下来iis增加web网站: 这里i ...

  7. Java学习笔记-BigDecimal类型

    1.介绍 Java在java.math包中提供的API类BigDecimal,用来对超过16位有效位的数进行精确的运算.双精度浮点型变量double可以处理16位有效数.在实际应用中,需要对更大或者更 ...

  8. python-实现二叉树

    # encoding=utf-8 class Node(object): def __init__(self, item): self.item = item self.lchild = None s ...

  9. MQ:Communications link failure

    ActiveMQ:Communications link failure问题以及解决办法   ActiveMQ版本:5.5.1 MQ 所使用的 MySQL 是 InnoDB存储引擎 记录人:@郑昀 现 ...

  10. Ubuntu 14.04环境编译android源码android-5.0.2_r1.7z

    环境: Win7:8G内存 vmware:vm给ubuntu分配4G内存80G空间 参考视频: https://www.bilibili.com/video/BV15t411R78o ubuntu14 ...