在常用的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. PHP中获取时间的下一周下个月的方法

    PHP中获取时间的下一周,下个月等通常用于定制服务的时候使用,比如包月会员,包年等等 //通常用于定制服务的时候使用,比如包月会员,包年等等 //获取当前时间过一个月的时间,以DATETIME格式显示 ...

  2. 【Unity】阅读LuaFramework_UGUI的一种方法

    写在前面 我第一次接触到LuaFramework_UGUI是在一个工作项目中,当时也是第一次知道toLua.但我刚开始了解LuaFramework_UGUI时十分混乱,甚至将LuaFramework_ ...

  3. 如何用算法把一个十进制数转为十六进制数-C语言基础

    这一篇文章要探讨的是"如何用算法实现十进制转十六进制"并不涉及什么特别的知识点.属于C语言基础篇. 在翻找素材的时候,发现一篇以前写的挺有意思的代码,这篇代码里面涉及的知识点没有什 ...

  4. Qt之如何创建并显示一个柱状图

    创建一个简单的柱状图 第一步:创建一个QBarSet对象:QBarSet类代表条形图中的一组条形. QBarSet *set0 = new QBarSet("Jane"); QBa ...

  5. [C#]协变Covariance案例

    协变参考代码1: using System; using System.Collections.Generic; using System.Linq; namespace CovarianceSoOn ...

  6. 寄存器与RAM的区别

    转自:https://blog.csdn.net/qq_18191333/article/details/106912668 概述 寄存器是"存储设备",主要用于存储和检查微型计算 ...

  7. git 本地项目初始化提交至仓库

    命令行指令 Git初始化配置 git config --global user.name"abc" git config --global user.email"1234 ...

  8. GDB使用详解

    来源:GDB使用详解 - 知乎 (zhihu.com) 1. 概述 ​ GDB 全称"GNU symbolic debugger",从名称上不难看出,它诞生于 GNU 计划(同时诞 ...

  9. 关于k8s微服务的基础知识分享总结

    1.说起k8s,先得讲讲微服务,来个图(百度上找到的图),初识 1.微服务架构强调的是一种架构模式,提倡将单一的应用程序,划分为一组小的服务,每个服务运行在其独立的自己的进程中,服务之间相互协调配合, ...

  10. Windows 11 正式版(2021/10/19更新)

    Windows 11 (business editions), version 21H2 (updated October 2021) (x64) - DVD (Chinese-Simplified) ...