效果图:
index.wxml:
<view class="section">
<view class="section__title">行</view>
<view class="flex-row">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
index.wxss:
.section{
width: 90%;
/*居中*/
margin:0 auto;
}
.flex-row{
/*flex块级,inline-flex:行内快*/
display: flex;
/*多行显示,拆行或拆列,
如果元素不是弹性盒对象的元素,则 flex-wrap 属性不起作用*/
flex-wrap: wrap;
/*格子间隔*/
justify-content: space-between;
}
.bc_green{
background: green;
width: 30%;
height: 200rpx;
/*文字居中*/
text-align: center;
}
.bc_red{
background: red;
width: 30%;
height: 200rpx;
text-align: center;
}
.bc_blue{
background: blue;
width: 30%;
height: 200rpx;
text-align: center;
}
--------------------------------------------------------------------------
想显示行还可以使用
//以行显示
display: flex;
flex-direction: row;
//以列显示
display: flex;
flex-direction: column;