弹性盒子
"""
.father {
border: 1px solid #000;
/* 弹性盒子设置一定要放在父级元素上面 它会自动排列 */
display: flex;
flex-direction: row;
/*
水平方向 反向排序
flex-direction: row-reverse;
水平方向排序
flex-direction: row;
垂直方向排序
flex-direction:column;
垂直方向反向排序
flex-direction:column-reverse;*/
}
"""
"""
/* justify-content 定义了主轴方向对齐方式
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
*/
"""
"""
/* align-items属性定义项目在交叉轴上如何对齐。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
*/
"""
"""
/*
flex-wrap 这个属性操作弹性盒子换行
nowarp 是默认属性 代表不换行
warp 换行
wrap-reverse 换行并取反
*/
"""
"""
/* 边框内容放置到内边距 CSS3 属性 */
box-sizing: border-box;
"""
微信开发者工具部分
wxml部分
<!--pages/home/home.wxml-->
<text></text>
<view class='nav'>
<image src="../../assets/images/banner-01.png"></image>
</view>
<view class='index-nav'>
<view class='ul'>
<view class='li'>
<image src='../../assets/icons/grid-01.png'></image>
<view class='zt'>美食</view>
</view>
<view class='li'>
<image src='../../assets/icons/grid-02(1).png'></image>
<view class='zt'>美食</view>
</view>
<view class='li'>
<image src='../../assets/icons/grid-03.png'></image>
<view class='zt'>结婚啦</view>
</view>
<view class='li'>
<image src='../../assets/icons/grid-04.png'></image>
<view class='zt'>卡拉OK</view>
</view>
<view class='li'>
<image src='../../assets/icons/grid-05.png'></image>
<view class='zt'>找工作</view>
</view>
<view class='li'>
<image src='../../assets/icons/grid-06.png'></image>
<view class='zt'>辅导班</view>
</view>
</view>
<view class='enter'>
进入首页
</view>
</view>
wxss部分
/* pages/home/home.wxss */
.nav image {
width: 750rpx;
}
.ul {
display: flex;
flex-wrap: wrap;
}
.li {
width: 33.33%;
height: 200rpx;
border: 1rpx solid #ddd;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.li image {
width: 102rpx;
height: 102rpx;
}
.zt{
font-size: 25rpx;
font-family: "微软雅黑";
}
.enter{
background: yellowgreen;
height: 400rpx;
}