前言
当CSS2风行的时候，最罕用的页面布局形式就是DIV+CSS，其中CSS外面的float 和 position:relative、position:absolute成为那个时代布局罕用的形式。
但毛病也是很显著，比方float的浮动打消就要埋坑，position尽管好用，然而对于自适应PC、手机一下就显得力不从心。
始终疲于在解决浏览器兼容和多端显示不统一的时候，呈现了Bootstrap他的栅格零碎的确好用。随之很长一段时间都没有再找寻布局的新实现形式。直到看到CSS3外面的flex,基本上解决了立体畛域所有的布局形式了。
什么是flex?
Flex是Flexible Box的缩写，意为”弹性布局”，也就是说这种布局形式能够让HTML的盒模型有更多布局形式。
弹性布局能够做什么？
基本上目前所有的网页布局都能够由弹性盒模型来实现。
这里介绍几个手机上罕用的布局形式
上中下
这种布局须要思考中部要依据窗口的高度自适应，如果用传统形式，须要将底部固定在最上面，或者须要JS的运算染指;而当初只须要给中部加上一个主动增大的属性就能够实现这个成果。
<body> <header>上</header> <main>中</main> <footer>下</footer></body>body{ height: 100vh; width: 100vw; display: flex; flex-direction: column; text-align: center; font-size: 24px; color: white;}header{ background-color: #2980b9; height: 56px;}main{ background-color: #e74c3c; flex-grow: 1;}footer{ background-color: #2c3e50; height: 100px;}