微信小程序中的自动换行,实现代码如下:
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;
}