1 垂直布局

头尾固定高度，中间部分自适应剩余高度。

首先介绍下这种极其简单的布局方式，大致需求是页面/容器整体分为头部、中间内容区域、尾部三大部分，这三部分的宽度都需要撑满整个页面/容器，其中头尾高度固定，中间部分需要自适应剩余空间。

第一步

啥也不说先往容器中丢三个flex控件（或者你需要的其他布局容器）。

第二步

修改外层容器的布局样式为“垂直布局，水平充满”。

第三步

修改头部和尾部这两个控件的扩展比率为0，并设定设计稿给出的固定高度（如果设计稿说这里的固定高度由子容器撑开，那就不用设置高度了），中间部分扩展比率设置为1。

第四步

嘿嘿，没有第4步了，上面已经完成了。

试试调整浏览器高度，看看是不是整体高度变了时头尾高度不变，中间部分随着整体高度变化而变化。

2“比翼双飞”布局

设计师说他又有想法了，在上面提到的垂直布局的基础上，需要对中间部分再做个左右宽度固定，中间宽度自适应的样式，取名为“比翼双飞”布局。

其实有了前面的基础这个实现起来也其实也挺简单的。（设计师：简单你还打我）

第一步

在前面实现的布局的基础上，再往中间部分的flex容器中加入三个新的flex容器。

第二步

选中原先中间部分flex容器，设置布局属性中的垂直方向对齐方式为“充满（stretch）”。

第三步

为左右两部分设置固定宽度，并将扩展比率设置为0，中间部分扩展比率设置为1。

这样就大功告成啦！

设计师说：左边部分我觉得应该强化它的作用，让他放到整体的外边，然后原先右边那个我不要了，按我这新的设计稿改。

莫慌莫慌，问题不大，我们设计器还是挺强大的，这个需求只要拿前面的成果调几下就ok了。

第一步

在设计器大纲里面，将“左边部分”拖放到最外层，并通过“前移”调整顺序到第一位。

第二步

布局乱了不要慌，接着我们再为我们的容器里再添加一个flex容器（就取名为“新的右边部分”吧），并把原“头部”“中间部分”和“尾部”都丢到它的怀抱里面。

第三步

稳住，布局暂时乱掉了而已，马上搞定了。

先把外层容器的布局方式改回水平布局，然后将“新的右边部分”的布局方式改成“垂直布局，水平充满”，同时将它的高度改为100%。

第四步

成了，就快成了！

接着把“右边部分”去掉就ok了。不不不，我们不急着去掉，先隐藏掉就好了，避免回头需求又要这部分了。

上面只是演示怎么快速改变布局的方式，如果从0开始上述设计师的第三个需求，相信有了前面几个例子对你来说也是简简单单啦。

#往期推荐#

# 学完这篇，苍穹页面布局so easy！

更多精彩内容，“码”上了解！↓