页面布局，从理论到实操，从入门到精通（上）

听说你学习了《学完这篇，苍穹页面布局so easy！》，初步了解了flex布局的相关知识？是否一看就会，一做就废，开发中还被以下问题困扰：

花费大量的时间在页面布局上;

经常因为设计师修改设计稿而又花费大量精力去调整页面布局；

头发越来越少...

那么来吧，保护头发，从看这篇文章开始~

下面让小编手把手教你如何实现日常开发中遇到的各种页面常见布局：

1 垂直布局

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

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

第一步

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

第二步

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

第三步

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

第四步

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

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

2“比翼双飞”布局

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

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

第一步

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

第二步

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

第三步

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

这样就大功告成啦！

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