效果二維碼
效果圖
WXML
<view class="section">
<view class="tui-table-view">
<view class="tui-col-3">
<icon class="iconfont icon-shouye"></icon>
<view>Home</view>
</view>
<view class="tui-col-3">
<icon class="iconfont icon-xinfeng"></icon>
<view>Email</view>
</view>
<view class="tui-col-3">
<icon class="iconfont icon-duihuaxinxi"></icon>
<view>Chat</view>
</view>
<view class="tui-col-3">
<icon class="iconfont icon-dibiao"></icon>
<view>location</view>
</view>
<view class="tui-col-3">
<icon type="search" size='30'></icon>
<view>search</view>
</view>
<view class="tui-col-3">
<icon class="iconfont icon-dianhua"></icon>
<view>phone</view>
</view>
<view class="tui-col-3">
<icon class="iconfont icon-shezhi"></icon>
<view>setting</view>
</view>
<view class="tui-col-3">
<icon type="info" size='30' color='#797979'></icon>
<view>about</view>
</view>
<view class="tui-col-3">
<icon class="iconfont icon-gengduotianchong"></icon>
<view>more</view>
</view>
</view>
</view>
WXSS
.tui-table-view{
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
}
.tui-col-3{
flex: 0 0 auto;
width: 33.33333333%;
text-align: center;
color: #797979;
padding: 40rpx 0;
font-size: 30rpx;
}
總結
1、使用flex進行佈局要注意兼容性,所以採用:display: -webkit-flex;display: flex;
2、爲了保證每排三個圖標的兩對對齊,採用:justify-content: space-between;
3、父元素必須設置flex-wrap: wrap;進行換行,否則會在一排展示;
4、每個子元素的寬度width: 33.33333333%;必須寫出,否則會按照其佔位大小分配;
5、每個子元素設置flex: 0 0 auto;否則某個子元素超出,會改變其他元素大小!