小程序学习笔记

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。

垂直布局类似设置。

上一篇下一篇

猜你喜欢

热点阅读