首先看图
手机商场经常会有商品列表功能，这样其实可以用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>