解决flex布局中justify-content设置成space-between后因数据问题导致最后一行布局错乱-Toy模板网

这篇具有很好参考价值的文章主要介绍了解决flex布局中justify-content设置成space-between后因数据问题导致最后一行布局错乱。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

解决flex布局中justify-content设置成space-between后因数据问题导致最后一行布局错乱

文章来源地址https://www.toymoban.com/news/detail-415639.html

解决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>