首先看图

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

css3flex布局实现商品列表的更多相关文章

  1. 微信小程序电商实战-商品列表流式布局

    今天给大家分享一下微信小程序中商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~ 流式布局概念 流式布局也叫百分比布局 把元素的宽,高,margin,padding不再用固定数值,改用百分 ...

  2. Flutter实战视频-移动电商-30.列表页_商品列表UI界面布局

    30.列表页_商品列表UI界面布局 小程序里面的布局方式 小程序的图片上这里使用的是warp布局,因为首页里面火爆专区,已经用过了warp来布局了. 所以这里我们没有必要再讲一遍,这里我们使用List ...

  3. Flutter实战视频-移动电商-53.购物车_商品列表UI框架布局

    53.购物车_商品列表UI框架布局 cart_page.dart 清空原来写的持久化的代码; 添加对应的引用,stless生成一个静态的类.建议始终静态的类,防止重复渲染 纠正个错误,上图的CartP ...

  4. Flutter实战视频-移动电商-54.购物车_商品列表子项布局

    54.购物车_商品列表子项布局 子项做成一个单独的页面 新建cartItem.dart文件 新建cart_page文件夹,在里面新建cart_item.dart页面, 页面名字叫做CartItem 定 ...

  5. 11 Flutter仿京东商城项目 商品列表页面二级筛选导航布局

    ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; imp ...

  6. 10 Flutter仿京东商城项目 商品分类跳转到商品列表传值 商品列表页面布局

    pages下面新建: ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper ...

  7. IOS详解TableView——选项抽屉（天猫商品列表）

    在之前的有篇文章讲述了利用HeaderView来写类似QQ好友列表的表视图. 这里写的天猫抽屉其实也可以用该方法实现,具体到细节每个人也有所不同.这里采用的是点击cell对cell进行运动处理以展开“ ...

  8. 如何用Baas快速在腾讯云上开发小程序-系列4：实现客户侧商品列表、商品详情页程序

    版权声明:本文由贺嘉 原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/431172001487671163 来源:腾云阁 h ...

  9. Flutter实战视频-移动电商-28.列表页_商品列表后台接口调试

    28.列表页_商品列表后台接口调试 主要调试商品列表页的接口 这个接口是最难的因为有大类.小类还有上拉加载 先配置接口 config/service_url.dart //const serviceU ...

随机推荐

  1. ps 快捷键大全

    一.工具箱(多种工具共用一个快捷键的可同时按[Shift]加此快捷键选取)矩形.椭圆选框工具 [M]移动工具 [V]套索.多边形套索.磁性套索 [L]魔棒工具 [W]裁剪工具 [C]切片工具.切片选择 ...

  2. 123457123457#0#-----com.cym.YuErBaiKe02--前拼后广--育儿百科

    com.cym.YuErBaiKe02--前拼后广--育儿百科

  3. sbt配置文件

    # Set the java args to high -Xmx512M -XX:MaxPermSize=256m -XX:ReservedCodeCacheSize=128m # Set the e ...

  4. laravel服务提供者类说明

    IoC 是将内部设计的类交给系统去控制,但是有些类在初始化的时候,需要制定特定的参数,或者当你需要将实现类绑定到某个接口,这时候就必须对这些依赖进行配置,系统才能正确解析并引用. register 而 ...

  5. 【ARTS】01_34_左耳听风-201900701~201900707

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...

  6. iOS-UITextField的使用

    UITextField  UITextField * accountField = [[UITextField alloc] initWithFrame:CGRectMake(85.0f, 60.0f ...

  7. git学习链接---收藏----

    Github 创建新分支:https://blog.csdn.net/top_code/article/details/51931916Git易百教程:https://www.yiibai.com/g ...

  8. python运算符 - python基础入门(7)

    什么是运算符?听着高大上,实际小学生都能把它玩的贼溜.比如:3 + 2 – 5 * 0 = 0 一.算术运算符 简称加减乘除,直接上代码:   a = 10 b = 20 c = 30 # 其实上面三 ...

  9. [转帖]详解JVM内存布局及GC原理，值得收藏

    概述 https://www.toutiao.com/i6731345429574713868/ java发展历史上出现过很多垃圾回收器,各有各的适应场景,不仅仅是开发,作为运维也需要对这方面有一定的 ...

  10. 90%程序员都没有完全答对Cookie和Session的区别

    我在做面试官的时候,曾经问过很多朋友这个问题: Cookie 和 Session 有什么区别呢?大部分的面试者应该都可以说上一两句,比如:什么是 Cookie?什么是 Session?两者的区别等. ...