WX-MiniPrograme|容器布局(横向、纵向)

实际项目中最常见的两种布局:横向,纵向(水平、垂直),在小程序中实现也比较简单。

给父容器增加以下两个属性:

.content{    

    display: flex;    //设置为弹性布局

    flex-direction: row; //水平布局, column为垂直布局

    flex:1; //比重,平分父容器宽

 } 

设置flex效果,如:

父容器宽为90rpx,横向含有3个子控件,分别给每个子控件设置flex:1,则各宽为30rpx;

也可给其中一个设宽为10rpx,其他两分别设flex:1,则这两个宽分别为40rpx。

垂直布局类似设置。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容