# 1 功能介绍
这边文章会介绍在日常开发中遇到的页面常见布局，并描述如何在设计器中配置出来。
# 2 操作演示
## 2.1 垂直布局,头尾固定高度，中间部分自适应
首先介绍下这种极其简单的布局方式，大致需求是页面/容器整体分为头部、中间内容区域、尾部三大部分，这三部分的宽度都需要撑满整个页面/容器，其中头尾高度固定，中间部分需要自适应剩余空间。
* 第1步，先往容器中丢三个flex控件（或者你需要的其他布局容器）
* 第2步，修改外层容器的布局样式为“垂直布局，水平充满
* 第3步，修改头部和尾部这两个控件的扩展比率为0，并设定设计稿给出的固定高度（如果设计稿说固定高度由子容器撑开，那就不用设置高度），中间部分扩展比率设置为1
## 2.2 双飞翼布局
**在上面布局的基础上需要对中间部分再做个左右宽度固定，中间宽度自适应的样式。**
* 第1步：在前面实现的布局的基础上，再往中间部分的flex容器中加入三个新的flex容器
* 第2步：选中原先中间部分flex容器，设置布局属性中的垂直方向对齐方式为充满（stretch）
* 第3步：为左右两部分设置固定宽度，并将扩展比率设置为0，中间部分扩展比率设置为1，大工告成。
