css3flex布局实现商品列表

首先看图

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

来源：https://www.cnblogs.com/pengfei25/p/11683630.html

标签

font-size