效果图
微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua
wxml代码
<view>
按下去不做任何样式
</view>
<view hover-class='myred'>
按下去做样式
</view>
<view>flex-direction:row</view>
<view class='rongqi01'>
<view class='xm01'>01</view>
<view class='xm02'>02</view>
<view class='xm03'>03</view>
</view>
<view>flex-direction:column</view>
<view class='rongqi02'>
<view class='xm01'>01</view>
<view class='xm02'>02</view>
<view class='xm03'>03</view>
</view>
wxss代码
.myred{
color: red;
font-size: 30px;
font-weight: bold;
}
.rongqi01{
display: flex;
flex-direction: row;
}
.xm01{
background-color: antiquewhite;
width: 50px;
height: 50px;
}
.xm02{
background-color: aqua;
width: 50px;
height: 50px;
}
.xm03{
background-color: green;
width: 50px;
height: 50px;
}
.rongqi02{
display: flex;
flex-direction: column;
}
欢迎大家收看我的视频教程:微信小程序组件入门到精通
https://edu.csdn.net/course/detail/16193