微信小程序flex布局怎么实现上中下3行铺满整个窗口。

问题描述：

在微信小程序中使用flex实现上中下3行布局铺满整个窗口。

如图

**WXML **

<!--/*
***HotApp云笔记，基于HotApp小程序统计云后台
***免费云后台申请地址 https://weixin.hotapp.cn/cloud
***API 文档地址：https://weixin.hotapp.cn/api
***小程序技术讨论QQ群：173063969
*/-->
<!--index.wxml-->
<view class="container">
    <view class='title'><input name="title" placeholder-class="placeholder" placeholder="在此输入标题（可选）" value="{{item.value.title}}" /></view>
    <view class='row'>
        <textarea class='text' placeholder-class="placeholder"  name="content" focus="{{focus}}" value="{{item.value.content}}" placeholder="点击添加文本" />
    </view>
    <view class='bottom'>
        <button formType="submit" class='btn success'>保存</button>
    </view>
</view>

WXSS

/*
***HotApp云笔记，基于HotApp小程序统计云后台
***免费云后台申请地址 https://weixin.hotapp.cn/cloud
***API 文档地址：https://weixin.hotapp.cn/api
***小程序技术讨论QQ群：173063969
*/
page{
    width: 100%;
    height: 100%;
}
.container{
    flex-flow:column nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.title{
    margin: 15rpx 5%;
    width: 90%;
    text-align: center;
    height: 60rpx;
    font-size: 38rpx;
    border-bottom: 1px solid #f5f5f5;
}
.row{
    flex: 1;
    display: flex;
    width: 90%;
    height: auto;
    margin: 0 5%;
    overflow: hidden;
}
.row .text{
    flex: 1;
    width: 100%;
    height: auto;
    font-size: 36rpx;
    color: #666;
}

.bottom{
    width: 100%;
    background: #fff;
    display: flex;
    flex-flow:row nowrap;
    justify-content: center;
    align-items: center;
}
.bottom .btn{
    flex: 1;
    line-height: 2;
    padding-top: 10rpx;
    padding-bottom: 10rpx;
    margin: 30rpx 30rpx;
}
.btn.success{
    background: #1aad19;
    color: #fff;
}

在wxss里必须加

page{ width: 100%; height: 100%; }

否则container的height: 100%;不起作用从而导致container 的高不能填充满整个窗口。

效果如下：

HotApp云笔记，基于HotApp小程序统计云后台

免费云后台申请地址 https://weixin.hotapp.cn/cloud

API 文档地址：https://weixin.hotapp.cn/api

小程序技术讨论QQ群：173063969

转载于:https://my.oschina.net/u/3073834/blog/795766