在常用的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. C# Http 服务器get pos 请求 获取头信息 iOS 客户端联调

    using System; using System.Collections.Generic; using System.IO; using System.Net; using System.Text ...

  2. Websocket是什么？

    一. WebSocket是什么? Websocket是一种网络通信协议,是一个在计算机里专门在[两点]之间传输数据的约定和规范. 二. 为什么存在WebSocket? 因为 HTTP 协议有一个缺陷: ...

  3. 翻下旧资料，发现96年考过foxbase二级

    翻下旧资料,找到 96年通过二级考试的证书,那时考的是Foxbase,一路走来,从最早用netware+dos无盘站+foxbase做订单系统,库存管理系统,再到使用记事本码asp网站,PB+orac ...

  4. CSS网页布局基础

    CSS网页布局基础1.行布局-基础的行布局-行布局自适应-行布局自适应限制最大宽-行布局垂直水平居中-行布局某部位自适应-行布局固定宽-行布局导航随屏幕滚动2.多列布局-两列布局固定-两列布局自适应- ...

  5. Spring Cloud netty

    <properties> <spring.boot.version>2.3.2.RELEASE</spring.boot.version> <spring.c ...

  6. Ubuntu VMWare安装纪要

    一.VMware虚拟机下载与安装 版本:VMware Workstation 16 Pro 二.Ubuntu下载与安装 版本:ubuntu-20.04.2.0-desktop-amd64.iso 三. ...

  7. Python操作数据库读书笔记

    SQLite 简介 什么是 SQLite? SQLite是一个进程内的库,实现了自给自足的.无服务器的.零配置的.事务性的 SQL 数据库引擎.它是一个零配置的数据库,这意味着与其他数据库一样,您不需 ...

  8. idea 切换database数据库方言

    在适配各种国产数据库时常常遇到存在数据库方言的情况,例如openGauss支持oracle兼容模式.. 在这种情况下,就需要在idea里对方言进行切换,否则无法执行oracle语法的sql. 1.连接 ...

  9. Go_day08

    Go的Io流 获取文件信息 //获取文件 fileinfo, err := os.Stat("./aa.txt")//相对绝对路径都可以 if err != nil { fmt.P ...

  10. k8s集群角色管理

    查看集群各节点角色: [root@k8s-master-2 ~]# kubectl get nodes NAME STATUS ROLES AGE VERSION k8s-master-1 Ready ...