场景：手机屏幕上需要垂直展示两个栏目块，并保证栏目块与顶部底部的距离、栏目块之间的距离相等（当然要满足不同的屏幕高度，即高度适配）。
具体效果大致如下：
要求保持上面的三块高度相等。
Now let’s try several methods below:
- 方法一：基于flex实现
<!DOCTYPE html>
这种方法思路很简单，就是将整个“屏幕”分成上下两个部分wrapper1和wrapper2，wrapper1放置一个栏目1，wrapper2放置栏目2，并使栏目1贴近wrapper1底部，栏目2垂直居中wrapper2，接着结合flex布局中子元素中的flex-grow来完成。wrapper1的flex-grow设为1，wrapper2的flex-grow设为2，这样，就能保证wrapper2中的空隙是wrapper1的两倍，加上栏目2垂直居中等分wrapper2中的间隙。
扩展：那如果是不止2个栏目呢，这种方法还能很好地复用吗？当然可以，直接在上述代码基础上增加栏目，并保证最后一个栏目在其包裹块中垂直居中，并设置flex-grow为2，前面的栏目则贴紧包裹块的底部，flex-grow设为1。
2. 方法二：基于百分比
基于方法一，我们已经有了一个很清晰的思路，即分成上下两个部分，上部分中栏目贴紧底部，下部分中栏目垂直居中。基于这个思路，我们通过百分比来确定上下部分的高度。
<!DOCTYPE html>
这种方法的缺陷是：
- 高度的计算跟栏目数量有关（前提：栏目高度一样），不同的栏目数量需要重新计算一遍；
- 不够精确，毕竟百分比有些只能四舍五入；
3. 方法三：基于flex的space-between
就是单纯的space-between，看代码就是了：
<!DOCTYPE html>
这应该是最简单的方法。
4. 方法四：基于space-between和flex-grow
我们在整个屏幕顶部和底部分别插入一个空的wrapper，并设置flex-grow为1，栏目我们放在一个wrapper中，并通过space-between使里面的栏目均匀分布，同时根据里面的间隙数量设置flex-grow，比如：里面有两个栏目，也就是一个间隙，设为1，如果有三个栏目，有两个间隙，设为2，以此类推。。。
<!DOCTYPE html>
总结：上面四种方法，方法134都是通过flex实现，1、4比较通用，3最通用，但这几种方法由于弹性布局兼容性问题不好，有必要仔细斟酌一下。方法2虽然有不够通用，精度比较差的缺陷，但兼容性比较好，如果追求兼容性，请选择这种方法。
上述demo代码详见：
https://github.com/yaodebian/blog_code/tree/master/equal_layoutgithub.com
