问题描述：

在微信小程序中使用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