微信小程序 自动换行的实现

微信小程序中的自动换行，实现代码如下：

wxml：

< view class= 'header'>服务类型 view >

< view class= 'ff_anniu' >

< view class= 'ff_item' wx:for= '{{categorys}}' wx:key= '{{index}}'>

< view class= 'ff_itemname sel {{activeIndex == index ? "sel" : ""}}' data-id= '{{item.id}}' bindtap= 'binditem'>{{item.name}} view >

view >

view >

wxss：

.ff_anniu

{

width: 100%;

display: flex;

/* flex-direction: row;

flex-wrap: true; */ 特别注意： 实测这里flex-flow 和 flex-direction / flex-wrap 是不一样的

flex-flow: row wrap;

align-content: space-around;

}

.ff_item{

box-sizing: border-box;

flex: 0 0 33.3333333333333%;

font-size: 30 rpx;

color: #535353;

background-color: white;

padding: 20 rpx;

text-align: center;

display: block;

}