在常用的flex布局中，當頁面展示商品時，因為數(shù)據(jù)的不確定，導致justify-content設置成space-between，最后一行布局錯亂
?文章來源地址http://www.zghlxwxcb.cn/news/detail-415639.html
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 標簽去占據(jù)位置，如果還不明白可以給i添加高度和背景色。再查看
然后再減去一個div第二個 i 就會上來
?
文章來源：http://www.zghlxwxcb.cn/news/detail-415639.html
?
到了這里，關于解決flex布局中justify-content設置成space-between后因數(shù)據(jù)問題導致最后一行布局錯亂的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
