小程序
小游戏
企业微信
微信支付
扫描小程序码分享
1.3.0版本应用flex布局的效果:
1.4.0版本应用flex布局的效果(间距是随机的,每次刷新页面效果都不一样):
3 个回答
找到原因了,还是flex本身的样式原因,不好意思麻烦您了
内容中可能包含密钥、AppSecret等私密参数,泄漏会有安全风险,请检查内容并确认。
<
view
class
=
"flexcolumn"
>
block
wx:for
"{{arrs}}"
"flexrow bot"
"flexone left"
button
"weui-btn"
type
"{{item.a.checked?'primary':'default'}}"
bindtap
"select"
>{{item.a.name}}</
</
"flexone mid"
"{{item.b.checked?'primary':'default'}}"
>{{item.b.name}}</
"flexone right"
"{{item.c.checked?'primary':'default'}}"
>{{item.c.name}}</
.flexrow {
display
: flex;
: -webkit-box;
: -webkit-flex;
: -ms-flexbox;
flex-flow: row wrap;
}
.flexcolumn {
flex-flow: column wrap;
.flexone {
flex:
1
;
-webkit-box-flex:
-webkit-flex:
-ms-flex:
.
left
{
padding-left
:
10px
right
padding-right
.mid {
padding
0
.bot {
padding-bottom
"arrs": [
"a": {
"name": "河流",
"checked": false
},
"b": {
"name": "优美",
"c": {
"name": "白菜",
"name": "奶奶",
"name": "团结",
"name": "田野",
"name": "健康",
"name": "笔",
"name": "独立",
"name": "电脑",
"name": "扫帚",
"name": "生姜",
]
你好,麻烦提供一下相关的wxml结构和wxss样式。
找到原因了,还是flex本身的样式原因,不好意思麻烦您了
<
view
class
=
"flexcolumn"
>
<
block
wx:for
=
"{{arrs}}"
>
<
view
class
=
"flexrow bot"
>
<
view
class
=
"flexone left"
>
<
button
class
=
"weui-btn"
type
=
"{{item.a.checked?'primary':'default'}}"
bindtap
=
"select"
>{{item.a.name}}</
button
>
</
view
>
<
view
class
=
"flexone mid"
>
<
button
class
=
"weui-btn"
type
=
"{{item.b.checked?'primary':'default'}}"
bindtap
=
"select"
>{{item.b.name}}</
button
>
</
view
>
<
view
class
=
"flexone right"
>
<
button
class
=
"weui-btn"
type
=
"{{item.c.checked?'primary':'default'}}"
bindtap
=
"select"
>{{item.c.name}}</
button
>
</
view
>
</
view
>
</
block
>
</
view
>
.flexrow {
display
: flex;
display
: -webkit-box;
display
: -webkit-flex;
display
: -ms-flexbox;
flex-flow: row wrap;
}
.flexcolumn {
display
: flex;
display
: -webkit-box;
display
: -webkit-flex;
display
: -ms-flexbox;
flex-flow: column wrap;
}
.flexone {
flex:
1
;
-webkit-box-flex:
1
;
-webkit-flex:
1
;
-ms-flex:
1
;
}
.
left
{
padding-left
:
10px
;
}
.
right
{
padding-right
:
10px
;
}
.mid {
padding
:
0
10px
;
}
.bot {
padding-bottom
:
10px
;
}
"arrs": [
{
"a": {
"name": "河流",
"checked": false
},
"b": {
"name": "优美",
"checked": false
},
"c": {
"name": "白菜",
"checked": false
}
},
{
"a": {
"name": "奶奶",
"checked": false
},
"b": {
"name": "团结",
"checked": false
},
"c": {
"name": "田野",
"checked": false
}
},
{
"a": {
"name": "健康",
"checked": false
},
"b": {
"name": "笔",
"checked": false
},
"c": {
"name": "独立",
"checked": false
}
},
{
"a": {
"name": "电脑",
"checked": false
},
"b": {
"name": "扫帚",
"checked": false
},
"c": {
"name": "生姜",
"checked": false
}
}
]
你好,麻烦提供一下相关的wxml结构和wxss样式。