传统布局的解决方式，是基于盒子模型，依赖 display，position，float 等属性。它对于那些特殊布局非常不方便。

       就比如，垂直居中就不容易实现。我们可能要 position + transform 才能配合完成。

新的方案flex布局，可以简便、完整、响应式地实现各种页面布局。

使用了flex布局的盒子模型设置垂直居中就非常简单了，只需要设置 align-items:center; 属性。

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

两栏布局

方法一

方法二

方法三

       |  利用定位 position

方法四

      |  利用弹性布局 flex