weui flex 分布
<!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">-->
<link href="Scripts/fullcalendar/css/iconfont.css" rel="stylesheet" />
<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: 25px;
/*所有矢量圖風格：紅色*/
color: red;
}
.item-wrap p {
font-size:10px;
}
</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">
<i class="icon iconfont icon-kaoqindaqia"></i>
<p>打卡</p>
</div>
</div>
<div class="weui-flex__item list-item">
<div class="item-wrap">
<i class="icon iconfont icon-kaoqinchaxun"></i>
<p>查詢</p>
</div>
</div>
<div class="weui-flex__item list-item">
<div class="item-wrap">
<i class="icon iconfont icon-kaoqinqingjia"></i>
<p>請假</p>
</div>
</div>
<div class="weui-flex__item list-item">
<div class="item-wrap">
<i class="icon iconfont icon-kaoqinbaobei"></i>
<p>報備</p>
</div>
</div>
<div class="weui-flex__item list-item">
<div class="item-wrap">
<i class="icon iconfont icon-kaoqinyichang"></i>
<p>異常</p>
</div>
</div>
<div class="weui-flex__item list-item">
<div class="item-wrap">
<i class="icon iconfont icon-kaoqinbulu"></i>
<p>補錄</p>
</div>
</div>
<div class="weui-flex__item list-item">
<div class="item-wrap">
<i class="icon iconfont icon-qitakaoqin"></i>
<p>其他考勤</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
效果圖：
weui flex 分布