效果图

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