首先看圖
手機商場經常會有商品列表功能，這樣其實可以用flex布局實現
注意兩個地方：
1、商品列表平衡間距（flex布局的換行加兩端對齊）
2、中間文字行數不一樣，會出現下方留下空白，如何解決（flex布局上下對齊）
代碼：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>css3flex布局實現商品列表</title> <style type="text/css"> h2,h3,p{margin:0;padding:0} html,body{width:100%;height:100%;background-color:#eee} body{overflow:hidden;display: flex;justify-content: center} #big{ width:500px;background-color: #fff;margin:auto; display:flex; flex-wrap: wrap; padding:7px; justify-content: space-between } .goodsItem{ width:49%; border:1px solid #ccc; box-shadow: 0 0 8px; margin:4px 0; /* 這里是防止高度不一致導致下方出現空白 */ display:flex; flex-direction: column; justify-content: space-between; /* 這里是防止一開始圖片沒有加載的時候會擠在一塊了 */ min-height: 314px } .goodsItem>img{width:100%} .goodsItem>h2{font-size:14px;padding:5px} .goodsItem>.info{background-color: #ddd} .info>p{ padding:5px } .price .now{ font-size: 16px; color:red; font-weight: bold } .price .old{ font-size: 12px; text-decoration: line-through } .sell{ display: flex; justify-content: space-between; font-size:14px; } </style> </head> <body> <script type="text/javascript"> </script> <div id= "big"> <div class="goodsItem"> <img src="src/1.png" alt=""> <h2 class="title">測試文件雙4G版測試文件雙4G版測試文件雙4G版</h2> <div class="info"> <p class="price"> <span class="now">￥2195</span> <span class="old">￥2195</span> </p> <p class="sell"> <span>熱賣</span> <span>剩60件</span> </p> </div> </div> <div class="goodsItem"> <img src="src/1.png" alt=""> <h2 class="title">測試文件</h2> <div class="info"> <p class="price"> <span class="now">￥2195</span> <span class="old">￥2195</span> </p> <p class="sell"> <span>熱賣</span> <span>剩60件</span> </p> </div> </div> <div class="goodsItem"> <img src="src/1.png" alt=""> <h2 class="title">測試文件</h2> <div class="info"> <p class="price"> <span class="now">￥2195</span> <span class="old">￥2195</span> </p> <p class="sell"> <span>熱賣</span> <span>剩60件</span> </p> </div> </div> </div> </body> </html>