flex -- 解決等距布局 · 前端知識 -- 學習整理

>[success] # 等距布局 * 項目中經常需要如下布局形式 ![](https://img.kancloud.cn/47/97/479719ca1405b3feb9932f4a050893bf_624x328.png) * 如果使用flex 的**justify-content: space-between;** 當內容沒有完全占滿整個容器效果 ![](https://img.kancloud.cn/50/26/502629a2393adaaa768843289c05c64b_680x312.png) * 想利用flex 達到效果，第一種方法計算法，以當前案例來說外層容器為430，每個容器寬度為100，則每個容器中間為10且最后4n的元素右邊距為0 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .content{ display: flex; flex-wrap: wrap; background-color: antiquewhite; width: 430px; } .content > .item{ width: 100px; height: 100px; margin-right: 10px; margin-bottom: 10px; background-color: rebeccapurple; } .content > .item:nth-child(4n){ margin-right: 0px; } </style> </head> <body> <div class="content"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">5</div> </div> </body> </html> ~~~ * **推薦**使用占位法，將占位元素寬度設置和內容元素一樣，占位元素不要設置高度，占位元素個數為**列數減-2** 即當前四列則4-2，兩個占位元素，好處不用計算 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .content{ display: flex; flex-wrap: wrap; justify-content: space-between; background-color: antiquewhite; width: 430px; } .content > .item{ width: 100px; height: 100px; margin-bottom: 10px; background-color: rebeccapurple; } .content > i{ width: 100px; } </style> </head> <body> <div class="content"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">5</div> <i></i><i></i> </div> </body> </html> ~~~