小程序栏目列表布局 解放 ul li 一个flex的小运用-来自朋友的推荐

一、先来个效果图

二，wxml布局

<view class="columnList">
   <view class="icon"></view>
   <view class="title"></view>
   <view class="arrowRight"></view>
</view>

三、wxss布局

.columnList{
  width: 100%;
  padding: 20rpx;
  background: gray;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.icon{
  width: 40rpx;
  height: 40rpx;
  border:1rpx red solid;
}
.title{
  width: 70%;
  height: 40rpx;
  border: 1rpx yellow solid;
  margin: 0 20rpx;
}
.arrowRight{
  width: 20rpx;
  height: 20rpx;
  border-right: 1rpx #333 solid;
  border-top: 1rpx #333 solid;
  transform: rotate(45deg);
  margin-left: 36rpx;
}

四、解放float，flex真香