首先看图

手机商场经常会有商品列表功能，这样其实可以用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. ISO/IEC 9899:2011 条款6.3.1——算术操作数

    6.3.1 算术操作数 6.3.1.1 布尔.字符以及整数 1.每个整数类型具有一个整数转换等级,如下定义: ——两个带符号的整数类型都不应该具有相同等级,即使它们具有相同的表示. ——一个带符号整数 ...

  2. js 高级程序设计 第四章学习笔记

    问题:怎么才能形象的理解堆栈空间? 1. 声明变量 使用 var 声明的变量会自动被添加到最接近的环境中.在函数内部,最接近的环境就是函数的局部 环境:在 with 语句中,最接近的环境是函数环境.如 ...

  3. maven执行过程中抛出的各类异常信息

    价值 各类异常信息分类 举例 maven源代码的模块maven-core里的各类*Exception命名的class包含里,maven执行过程中打印的各类异常日志内容 比如如下错误 错误信息分别来自( ...

  4. jenkins：忘记密码怎么办

    方法一: 去掉密码登录配置 修改 JENKINS_HOME/users/user.conf user.conf 就是忘记密码对应的用户针对 yum install jenkins 安装的Jenkins ...

  5. xml 数组 互相转换方法

    public function xmlToArray($xml) { //将XML转为array $array_data = json_decode(json_encode(simplexml_loa ...

  6. 微服务之Polly熔断策略

    NET Core 微服务之Polly熔断策略 紧接着上一篇说,咱们继续介绍Polly这个类库 熔断策略(Circuit-breaker) 如果调用某个目标服务出现过多超时.异常等情况,可以采取一定时间 ...

  7. 乐字节Java构造器（构造方法|构造函数）、方法与内存分析

    一. 构造器(构造方法|构造函数) 在创建对象时(new),必会调用一个特殊的方法,这个方法是初始化对象信息的为new服务的.这个方法称为“构造器” 使用 new + 构造方法创建一个新的对象. 构造 ...

  8. 乐字节Java学习01-Java语言概述，Java发展前景，Java的特点

    从这篇文章开始,小乐准备写一整系列的Java学习文章,一步一步带您进入Java的神奇世界! 这是第一篇:Java语言概述以及Java的发展前景 1.SUN公司介绍 SUN公司全称是Stanford U ...

  9. (JavaScript) 百度地图与腾讯地图坐标转换

    /** * 坐标转换,百度地图坐标转换成腾讯地图坐标 * lng 腾讯经度(pointy) * lat 腾讯纬度(pointx) * 经度>纬度 */ function bMapToQQMap( ...

  10. [转帖]linux bash环境变量简单总结

    linux bash环境变量简单总结 来源链接:http://www.178linux.com/8005 原创文章,如有转载,请注明原文地址 需要简单学习一下. 其实 我都是直接放一个 .sh文件到 ...