flex weui列表demo

发布时间：2020-12-15 01:50:11 所属栏目：百科来源：网络整理

导读：!DOCTYPE html html lang="en" head meta charset="UTF-8" meta name="viewport" content="width=device-width,initial-scale=1.0" meta http-equiv="X-UA-Compatible" content="ie=edge" titleDocument/title link rel="stylesheet" href="https://res.wx.q

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1002020_54y6cvkhpge.css">
<style>
.list {
/*排列方向*/
flex-direction:row;
/*flex-wrap（子元素换行的方式）：定义子元素超过一行，如何换行，分别有三个属性：
nowrap（默认值）：默认不换行；wrap：换行，第二行在第一行下面，从左到右；
wrap-reverse：换行，第二行在第一行上面，从左到右；
*/
/*怎么换行*/
flex-wrap: wrap;
/*justify-content: 子元素在主轴对齐方式：flex-start（默认值）：左对齐；flex-end：右对齐；center：居中
space-between：两端对齐，项目之间的间隔都相等；space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
*/
/*项目在主轴上对齐方式*/
justify-content: flex-start;
}
/*有六个属性设置在子元素项目上,order的作用就是改变子元素排列顺序,order：默认（0）值越小越靠前*/
.list-item {
/*放大比例默认是0*/
flex-grow: 0;
/*一行4个图标*/
flex-basis: 25%;
}

.item-wrap {
text-align: center;
}

.item-wrap .iconfont {
font-size: 22px;
color: red;
}

.item-wrap img { width: 20px; height: 20px; } </style></head><body> <div class="wrap"> <div class="container"> <div class="list-wrap"> <div class="weui-flex list"> <div class="weui-flex__item list-item"> <div class="item-wrap"> <img src="Files/Demo/yongyouh5/daka.png" /> <p>test</p> </div> </div> <div class="weui-flex__item list-item"> <div class="item-wrap"> <i class="icon iconfont icon-taozi"></i> <p>test</p> </div> </div> <div class="weui-flex__item list-item"> <div class="item-wrap"> <i class="icon iconfont icon-taozi"></i> <p>test</p> </div> </div> <div class="weui-flex__item list-item"> <div class="item-wrap"> <i class="icon iconfont icon-taozi"></i> <p>test</p> </div> </div> <div class="weui-flex__item list-item"> <div class="item-wrap"> <i class="icon iconfont icon-taozi"></i> <p>test</p> </div> </div> <div class="weui-flex__item list-item"> <div class="item-wrap"> <i class="icon iconfont icon-taozi"></i> <p>test</p> </div> </div> <div class="weui-flex__item list-item"> <div class="item-wrap"> <i class="icon iconfont icon-taozi"></i> <p>test</p> </div> </div> <div class="weui-flex__item list-item"> <div class="item-wrap"> <i class="icon iconfont icon-taozi"></i> <p>test</p> </div> </div> <div class="weui-flex__item list-item"> <div class="item-wrap"> <i class="icon iconfont icon-taozi"></i> <p>test</p> </div> </div> <div class="weui-flex__item list-item"> <div class="item-wrap"> <i class="icon iconfont icon-taozi"></i> <p>test</p> </div> </div> </div> </div> </div> </div></body></html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!