解决flex布局中justify-content设置成space-between后因数据问题导致最后一行布局错乱
在常用的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后因数据问题导致最后一行布局错乱的更多相关文章
- Flex 4中组件背景设置（填充方式）group为例子
以下以Group为例子讲述如何在Flex 4中填充背景颜色.图片: 1.图片填充方式: <s:Group x="0" y="0" height=" ...
- VMware下安装的CentOS7.5，设置成静态IP后ping不通外网
网上很多都说用下面的方法即可解决 在CentOS中 ping www.baidu.com 无法ping通,可能原因是DNS没配置好 方法一: 修改vim /etc/resolv.conf 增加如下内容 ...
- ArcGIS Desktop中为图像设置成不显示背景色
加载的栅格图层在arcgis中显示有黑色背景 方法一:如果有矢量边界的话,直接用矢量边界把黑色背景裁剪掉即可. 方法二: 如果是RGB三色: 这个只是不显示,并不改变原有的值 如果是值: 附:为影像数 ...
- Myeclipse中全部文件设置成UTF-8
如果要使插件开发应用能有更好的国际化支持,能够最大程度的支持中文输出,则最好使 Java文件使用UTF-8编码.然而,Eclipse工作空间(workspace)的缺省字符编码是操作系统缺省的编码,简 ...
- vue 解决双向绑定中 父组件传值给子组件后 父组件值也跟着变化的问题
说明: 近日开发中碰见一个很诡异的问题, 父组件动态的修改对象 data 中的值, 然后将这个对象 data 传给子组件, 子组件拿到后将 data 中的值 乘以 100 ,发现父组件中的值也跟着变 ...
- duilib中的V和H布局中滚动条问题
转自博客:http://blog.csdn.net/damingg/article/details/41149037 首先看一段xml代码 [html] view plaincopy <?xml ...
- 从零开始学android开发-布局中 layout_gravity、gravity、orientation、layout_weight
线性布局中,有 4 个及其重要的参数,直接决定元素的布局和位置,这四个参数是 android:layout_gravity ( 是本元素相对于父元素的重力方向 ) android:gravity (是 ...
- linux系统中查看己设置iptables规则
1.iptables -L 查看filter表的iptables规则,包括所有的链.filter表包含INPUT.OUTPUT.FORWARD三个规则链. 说明:-L是--list的简写,作用是列出规 ...
- android 布局中 layout_gravity、gravity、orientation、layout_weight
线性布局中,有 4 个及其重要的参数,直接决定元素的布局和位置,这四个参数是 android:layout_gravity ( 是本元素相对于父元素的重力方向 ) android:gravity (是 ...
- android布局中使用include及需注意点
在android布局中,使用include,将另一个xml文件引入,可作为布局的一部分,但在使用include时,需注意以下问题: 一.使用include引入 如现有标题栏布局block_header ...
随机推荐
- excel制作表格
我们这个表格举例: 1. 序号列自动生成序号.选中数字"1"所在的单元格,将鼠标停留在图片中标红的区域向下拖动即可 ...
- Maven-高级
Mvaen 高级 1 导入其他工程 资源文件 先install到仓库里 然后根据组织名项目名版本号写在dependence里正常导入 <dependence> <groupId> ...
- 决策树（DecisionTree）(附源码)
决策树(DecisionTree) 决策树所属类别:监督学习,分类 优点:直观易懂,算法简单 缺点:容易过拟合,对连续型数据不太容易实现 实现方案:ID3,CART,C4.5 详细的资料见连接:别 ...
- C++的万能引用解析
C++11除了带来了右值引用以外,还引入了一种称为"万能引用"的语法:通过"万能引用",对某型别的引用T&&,既可以表达右值引用,也可以表达左值 ...
- 【BFS】算法模板与思路
1.BFS算法的基础理论是什么? BFS算法名叫宽度优先搜索,虽然我能理解深度优先搜索,但我却不是很能理解宽度优先搜索. 一个很关键的点在于:宽度优先搜索是一个迭代的算法,不是递归的算法. 与DFS之 ...
- PCRaster安装
改了很久才import成功.期间查了不少东西,虽然大部分没用上,但还是记录一下. PCRaster的安装和个人的最终解决方法 Software for environmental modelling ...
- MariaDB简介
一.什么是数据库 DB 与 DBMS :DB(DataBase)即数据库,存储已经组织好的数据的容器.DBMS(DataBase Manage System)是数据库管理系统用来对数据库及数据库中的数 ...
- 在app中如何使weib-view不铺满全屏，自适应页面
// #ifdef APP-PLUS //自建webview var currentWebview = this.$scope.$getAppWebview(); var height = this. ...
- OSI七层模型、TCP协议
1. 网络资产搜索引擎 2. 网站存储用户密码进行MD5加密 3. 小型Web管理系统账号密码使用base64进行加密 4. IP地址:网络位+主机位 5. 局域网中没有DHCP服务主机获取的地址范围 ...
- 如何利用Apifox通过签名计算及数据加解密进行用户认证接口测试?
用户注册场景:输入签名数据signature,appId,13位时间戳timestamp,6位随机数nonce,merchantId(非必填,本次不填)的请求参数发送给服务器,服务器返回响应数值后,校 ...