微信小程序入门-弹性模型

最新推荐文章于 2024-07-12 09:30:00 发布

一只小小小蜜蜂

最新推荐文章于 2024-07-12 09:30:00 发布

阅读量4.2k

点赞数

分类专栏：微信开发文章标签：微信小程序弹性模式百分比分配

本文链接：https://blog.csdn.net/android_gogogo/article/details/54099309

版权

微信开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

不闲扯直接上代码

页面的wxml文件，一个view容器中包含三个子容器

<view class="flex-wrap">
<view class="a">a</view>
<view class="b">b</view>
<view class="c">c</view>
</view>

接下来就是wxss文件

/* pages/module/module.wxss */
.flex-wrap{
    display: -webkit-flex;
    flex-direction: column;
    height: 1000rpx;
}

.flex-wrap view{
    text-align: center;
    font-size: 40rpx; 
    color: white;
}
.a{
    background-color: red;
    flex: 2;
}
.b{
    background-color: green;
    flex: 1;
}
.c{
     background-color: yellow;
     flex: 2;
}

显示效果如下：

注意： display: -webkit-flex;说明使用弹性模式，在微信中默认的排列方式水平。flex-direction: column更改排列方式垂直。在该模型下，不声明父容器宽高，默认占满均分。可以通过设置父容器的宽度或高度和子容器的flex的值实现按比例分配空间。弹性模式最大的好处就是适应性强。