新闻列表页flex_使用css3的Flex布局实现列表展示

实现效果图如下：

通过css3样式实现(部分代码)：

.box{display:flex;flex-wrap:wrap;justify-content:space-between;align-content:flex-start;

}

在实际中会遇到list列表对3取余剩2的情况，页面就不是我们想要的了

我们想实现的是最后的一个靠左，这时候需要借助一个盒子，内容为空，边框颜色为背景色，代码如下：

.foodie-right-li-block{border-color:#f6f7f7;

}

需要注意的是，在list对3取余剩1和0的时候是不需要的，因此需要添加判断

结果如下：

好啦，到这里就结束了

如果想实现每行显示4个label发现这个方法不好使了，其实还是能够套用的，更改取余就好啦，代码如下：

说明：

1. class_fixed_new为list列表

2.因为余数为1和4的时候是不需要增加额外的盒子来辅助布局，隐藏通过v-if来现在，不加也可以，但是得加余数为0的判断

3.实现发布朋友圈的照片列表展示

话不多说，直接上码

data() {return{

imgsList: [0,1]

}

// 图片

.release-imgs{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-content:flex-start;.release-imgs-li {

width:220upx;height:220upx;background:goldenrod;margin-bottom:15upx;

}.release-imgs-li-add{background:#c9caca;font-size:100upx;line-height:200upx;text-align:center;

}.release-imgs-li-block{background:#eee;

}}

如果list的长度是1，4，7，那么需要一个额外的盒子

新闻列表页flex_使用css3的Flex布局实现列表展示相关推荐

vue项目实现从商品列表页跳转详情页后，返回列表页保持页面在原位置，且列表页刷新的方法
vue项目实现从商品列表页跳转详情页后,返回列表页保持页面在原位置,且列表页刷新的方法页面跳转后回退保持原位置 App.vue页面中使用keep-alive缓存组件 <template> ...
新闻列表页flex_微信小程序新闻网站列表页
javascript 技术文章开发微信小程序新闻网站列表页在app.json中可以设置所有文件的头部导航颜色 (是window属性的子属性) 在具体页面可以单独设置该页面的导航颜色 (直接写该属 ...
image 微信小程序flex_微信小程序flex布局案例(1)
微信小程序 flex 布局案例一前言最近在学习微信小程序时,看到很多布局都用到了 flex 布局,其实 flex 布局学习过好多东西不用就忘记了,这次用上就只得再去看了,争取学会.下面是我做的简单 ...
第103天：CSS3中Flex布局（伸缩布局）详解
一.Flex布局 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{display: ...
CSS3 box flex 布局
1.伸缩项目的布局方式-从左到右 <ul id="Layout1" class="box"><li>1</li><li ...
CSS3的flex布局：方向换行对齐顺序
教程 https://www.runoob.com/w3cnote/flex-grammar.html 概念方向换行方向与换行对齐方式多根轴线的对齐顺序排列
新闻列表页flex_C端列表页如何设计？
编辑导读:在C端产品设计中,数据列表页是非常常见的页面,它一般用来展示多条信息条目.虽然看起来十分简单,但也是不可或缺非常重要的页面.本文作者从产品使用场景出发,对列表页设计的设计重点和步骤展开了梳理 ...
vue路由+ elementUI表格组件：loop文章列表页enter内容页（vue路由传参userid）- 代码篇
elementUI表格组件,response.data.newsLists列表如何循环出来?如何点击传参numId,并进入对应的内容页? 本文意图: 使用官方table组件:实现API调用:文章遍历. ...
[HTML+CSS] 仿京东列表页项目实战
仿京东首页部分的项目链接在这: 链接: link. (https://blog.csdn.net/qq_49900295/article/details/123475801?spm=1001.2014 ...

新闻列表页flex_使用css3的Flex布局实现列表展示

新闻列表页flex_使用css3的Flex布局实现列表展示相关推荐

最新文章

热门文章