display: flex多栏多列布局(实例)

最新推荐文章于 2024-04-27 15:04:57 发布
最新推荐文章于 2024-04-27 15:04:57 发布
阅读量1.4k 收藏 3
点赞数 2
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42543264/article/details/106802812
版权

我们先来看看效果

其实很简单,来看看代码具体怎么实现的吧

wxml

<!--pages/new/new-exclusive/index.wxml-->
<view class="new-exclusive">
  <!-- 轮播图 S -->
  <swiper class="viewpager" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" bindchange="changeSwiper">
    <swiper-item wx:for="{{slideshow}}" wx:key="index">
      <image src="{{item.showImg}}" class="image"></image>
    </swiper-item>
  </swiper>
  <!-- <view class="dots">
    <block wx:for="{{slideshow}}" wx:key="index">
      <view class="dot{{index == currentSwiper ? ' active-z' : ''}}"></view>
    </block>
  </view> -->
  <!-- 轮播图 E -->
  <view class="new-exclusive-desc">
    <view>新人专享超值低价</view>
    <view>活动规则：每个ID限购一件，申请退款的不再享受该优惠</view>
  </view>

  <!-- 写入内容 S -->
  <view class="goods-list">
    <block wx:for="{{list}}" wx:key="index">
      <view class="goods">
        <image class="cover-img" src="../../../img/shangpin.jpg"></image>
        <view class="goods-title">{{item.title}}</view>
        <view class="goods-price">
          <text>¥</text>
          <text>{{item.price}}</text>
          <text>.</text>
          <text>00</text>
          <text>¥</text>
          <text>{{item.original_price}}</text>
        </view>
      </view>
    </block>
  </view>
  <!-- 写入内容 E -->
</view>

主要看写入内容这块,其他的都是辅助效果

wxss

.new-exclusive {
  background-image: url('http://ico.dongtiyan.com/tu-9.png');
  padding-bottom: 30rpx;
}
/* 轮播图 */
.viewpager {
  height: 162rpx;
  border-radius: .5rem;
  margin-bottom: 12rpx;
  overflow: hidden;
  margin: 0 30rpx 41rpx;
  padding-top: 23rpx;
}
.viewpager .image {
  width: 100%;
  height: 100%;
  border-radius: .5rem;
}

/*用来包裹所有的小圆点 */
.dots {
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

/*未选中时的小圆点样式 */

.dot {
  width: 7rpx;
  height: 6rpx;
  border-radius: 3rpx;
  margin-right: 26rpx;
  background-color: #BFBFBF;
}

/*选中以后的小圆点样式 */

.active-z {
  width: 26rpx;
  height: 6rpx;
  border-radius: 3rpx;
  background-color: #EC5E64;
}

.new-exclusive-desc {
  text-align: center;
  color: #FFFFFF
}
.new-exclusive-desc view:nth-child(1) {
  font-size: 32rpx;
  font-weight: bold;
}

.new-exclusive-desc view:nth-child(2) {
  font-size: 20rpx;
  margin-top: 15rpx;
}

/* 商品列表 */

.goods-list {
  display: -webkit-flex;
  background: #FEDCDC;
  border-radius: 20rpx;
  margin: 32rpx 20rpx;
  overflow: hidden;
  padding: 29rpx 20rpx 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: justify;
}
.goods-list::after {
  content: '';
  width: 218rpx;
}
.goods {
  width: 218rpx;
  background: #FFFFFF;
  border-radius: 10rpx;
  overflow: hidden;
  margin-bottom: 28rpx;
}
.cover-img {
  width: 100%;
  height: 164rpx;
}

.goods-title {
  margin-top: 18rpx;
  font-size: 20rpx;
  padding: 0 9rpx;
  color: #000000;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.goods-price {
  color: #F73A3F;
  padding: 0 9rpx 11rpx;
}

.goods-price text:nth-child(1), .goods-price text:nth-child(3), .goods-price text:nth-child(4) {
  font-size: 16rpx;
}
.goods-price text:nth-child(2) {
  font-size: 24rpx;
}

.goods-price text:nth-child(5) {
  margin-left: 10rpx;
}
.goods-price text:nth-child(5), .goods-price text:nth-child(6) {
  font-size: 12rpx;
  color: #999999;
}
.goods-price text:nth-child(6) {
  text-decoration: line-through;
}

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    slideshow: [{
        id: 1,
        showImg: "../../../img/slideshow/vivo.jpg"
      },
      {
        id: 2,
        showImg: "../../../img/slideshow/xinchun.jpg"
      }
    ],
    // 轮播数据 + 效果 S
    indicatorDots: true,
    autoplay: true, // 自动播放
    interval: 5000, //轮播时间
    duration: 300, // 滑动速度越大越慢
    circular: true, //是否循环
    beforeColor: "lightgray", //指示点颜色
    afterColor: "white", //当前选中的指示点颜色
    currentSwiper: 0,
    list: [
      {
        title: "商品标题显示两行商品标题显示两行商品标题显示两行商品标题显示两行",
        price: "520",
        original_price: "1314.00", 
      },
      {
        title: "商品标题显示两行商品标题显示两行商品标题显示两行商品标题显示两行",
        price: "520",
        original_price: "1314.00",
      },
      {
        title: "商品标题显示两行商品标题显示两行商品标题显示两行商品标题显示两行",
        price: "520",
        original_price: "1314.00",
      },
      {
        title: "商品标题显示两行商品标题显示两行商品标题显示两行商品标题显示两行",
        price: "520",
        original_price: "1314.00",
      },
      {
        title: "商品标题显示两行商品标题显示两行商品标题显示两行商品标题显示两行",
        price: "520",
        original_price: "1314.00",
      },
      {
        title: "商品标题显示两行商品标题显示两行商品标题显示两行商品标题显示两行",
        price: "520",
        original_price: "1314.00",
      },
      {
        title: "商品标题显示两行商品标题显示两行商品标题显示两行商品标题显示两行",
        price: "520",
        original_price: "1314.00",
      },
      {
        title: "商品标题显示两行商品标题显示两行商品标题显示两行商品标题显示两行",
        price: "520",
        original_price: "1314.00",
      },
      
    ]
  },
  /**
   * 轮播指示灯
   */
  changeSwiper: function (e) {
    this.setData({
      currentSwiper: e.detail.current
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

以上就是所有代码,很简单,有什么不懂的可以加下群

QQ群: 1102727334

青衫折扇
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5弹性布局两行三列,display:flex 多栏多列布局
weixin_33600376的博客
06-09 5064
转自：http://www.360doc.com/content/14/0811/01/2633_400926000.shtmldisplay:flex 多栏多列布局浏览器支持情况：火狐直接支持w3c无前缀写法，谷歌和opera支持-webkit- 前缀写法，比较适合移动端开发使用，display:flex 这个牛逼的css3布局属性，遗憾的是只有谷歌和火狐支持，中国人常用的手机上的浏览器几乎全军...
flex 固定一列_display:flex 多栏多列布局
weixin_28949049的博客
12-24 811
网页布局(layout)是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Fle...
css flex几种多列布局
12-30
基本的等分三列布局 .container{ display: flex; width: 500px; height: 200px; } .left{ flex:1; background: red; } .middle{ flex:1; background: green; } .right{ flex:1; background: blue; }
css display:flex 3列显示
weixin_42593549的博客
01-10 1022
可以使用 flexbox 布局实现3列显示。 首先，需要将父容器的 display 设置为 flex。然后，可以在父容器中使用 flex-wrap 属性来让容器自动换行，并设置 flex-direction 为 row，表示排列方向为横向。最后，可以使用 flex-basis 属性来设置子元素的宽度。 示例代码： .parent { display: flex; flex-wrap: wr...
display：flex 弹性布局
最新发布
zzb_lly的博客
04-27 1379
stretch (默认值) : 拉伸 flex 项以填充整个容器（这里特别要注意：如果 flex 项有尺寸属性（min-width / max-width / width / min-height / max-height / height），那么首先应用这些尺寸属性，伸展，就是会填充宽度。space-between: flex 项沿主轴均匀排布，即我们常说的沿主轴 两端对齐 ，第一 个flex 项在主轴开始位置，最后一个flex 项在主轴结束位置。flex-grow: 定义子元素的放大比例;
超详细！弹性盒子(display:flex)
weixin_49602426的博客
08-20 1万+
一般来说我们在css中用到的display大多数都接block(块级元素)、inline-block(行内块元素)、inline(行内元素)，这些在我们所平时需要的大部分地方都很好使，但是在某些地方会具有一定的局限性，让我们很难调样式，那么弹性盒子(弹性布局)就有可能会很好的帮助到你弹性盒子可以批量式的改变子元素的布局！那么弹性盒子用在什么地方比较合适呢：1.当一个盒子里的子元素需要垂直居中一个块的内容2.当盒子里所有的子元素占用等量的可用宽度/高度时。
css display:flex 属性
Silence_Sep的博客
03-07 366
转载：https://www.jianshu.com/p/d9373a86b748 一：display:flex 布局 display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最...
display:flex 多栏多列布局
09-23 947
网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案----Flex布局，可以简便...
详解CSS中的display:flex||inline-flex属性
09-27
主要给大家介绍了CSS中的display:flex和display:inline-flex属性，文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。
display: flex弹性布局
10-12
display: flex弹性布局
display：flex布局语法
11-20
flex 弹性盒子布局语法，关于廖雪峰老师网站学习笔记的分享，
css之dispaly:flex;多行多列
热门推荐
给我一颗橙子
10-02 1万+
最近老是遇到布局问题，尤其是在垂直居中布局上。之前不了解display：flex;最近看了看书，简单的整理了下，于是就产生了这篇文章 flex弹性布局可以简便，完整，响应式的实现各种页面的布局，而且现在也得到了所有浏览器的支持，实在是布局很便利的工具呢。 一、flex布局的基本概念 1.任何一个元素使用display：flex属性后都可以看做一个flex容器；2.它的子元素变成flex容器中
display css 需要注意的地方
Iamgoodgilr的博客
08-29 557
1、几个比较常用的display属性值 display:block/none/flex/inline-block/inline display:block 俩作用：1、把像span 、a等行内元素（一直讨厌这些名称词，只想用占整行和不占整行来表达）   设置为块级元素。     2、对于块级元素设置display:block就是显示作用（display:none隐藏）。 displa
CSS3基础学习（弹性盒子）（八）
qq_36802214的博客
08-19 535
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 弹性容器内包含了一个或多个弹性子元素。 属性 描述 display 指定 HTML 元素盒子类型。 flex-direction 指定了弹性容器中子元素的排列方式 justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。 align-items
display:flex详解
Anony_me的博客
06-29 1万+
1. 属性指定了弹性子元素在父容器中的位置。2. 内容对齐（）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐3. 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。4. 属性用于指定弹性盒子的子元素换行方式。5. 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。6. 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。（1）flex-direction的值有: ：横向从左到右排
前端提升篇之flex或grid布局实现多列均分布局
哆啦A瑶的博客
05-11 6197
提供一个使用弹性盒布局的多列均分布局终极解决方案，能够实现下图的效果： 其特点有： 列数可控 子元素的宽度相同 列和列之间有空隙，左右两边对齐（没有空隙） 子元素按照从左到右、从上到下的顺序排布 父元素使用flex布局： .container { width: 100%; height: auto; border: solid 1px gray; /* 使用flex布局，设置gap*/ display: flex; flex-wrap: wrap;
display:flex 使用实例
liuyan55的专栏
02-10 4200
display:flex 使用实例   flex的使用实例   1.  flex设置元素垂直居中对齐 在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现 HTML代码： &lt;div class="demo"&gt; &lt;div class="inner"&gt; &lt;p&gt;这是一个测试这是一个测试这是...
列表布局display:flex+列表左右两边有固定的图标+列表字体溢出使用省略号
lingliu0824的博客
08-27 729
效果： 未缩放时： 缩放时： 整体思路：使用ul和li标签，ul使用display:flex布局，li里面放文字和图标，当宽度足够时文字全部展示，宽度不够时溢出文字用…代替，图标不变。 1.文字溢出时使用…代替的实现方法：这三种样式缺一不可 最开始是把文字放在span标签里面了，但是发现无法实现…效果，如下，这样页面缩放时，li的宽度并不会随着缩放。 为了达到宽度不够时文字的…效果和图标不变的效果，使用了以下布局：文字部分直接放在li标签中，给li设置左右的padding,用来放i标签中的图标。
display:grid 布局实现两行两列
WMC_19931013的博客
03-17 5096
display:grid 布局
除了display: flex;还有什么布局？
01-03
除了display: flex;，还有以下几种常见的布局方式： 1. display: block; - 这是默认的布局方式，元素会以块级元素的形式显示，每个元素会独占一行。 - 例子： ```css .demo { display: block; } ``` 2. display: inline; - 元素会以行内元的形式显示，不会独占一行，可以与其他行内元素在同一行显示。 - 例子： ```css .demo { display: inline; } ``` 3. display: inline-block; - 元素会以行内块级元素的形式显示，不会独占一行，可以与其他行内元素在同一行显示，并且可以设置宽度、高度等属性。 - 例子： ```css .demo { display: inline-block; } ``` 4. display: grid; - 使用网格布局，将元素划分为行和列，可以更灵活地控制元素的位置和大小。 - 例子： ```css .demo { display: grid; } ``` 5. display: table; - 将元素显示为表格，可以使用表格的布局方式进行排列。 - 例子： ```css .demo { display: table; } ``` 6. display: none; - 元素不会显示，完全隐藏。 - 例子： ```css .demo { display: none; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值