WX-MiniPrograme|容器布局(横向、纵向)
2018-03-09 本文已影响14人
红尘丶
实际项目中最常见的两种布局:横向,纵向(水平、垂直),在小程序中实现也比较简单。
给父容器增加以下两个属性:
.content{
display: flex; //设置为弹性布局
flex-direction: row; //水平布局, column为垂直布局
flex:1; //比重,平分父容器宽
}
设置flex效果,如:
父容器宽为90rpx,横向含有3个子控件,分别给每个子控件设置flex:1,则各宽为30rpx;
也可给其中一个设宽为10rpx,其他两分别设flex:1,则这两个宽分别为40rpx。
垂直布局类似设置。