display: flex的个人理解

前言

当CSS2流行的时候，最常用的页面布局方式就是DIV+CSS，其中CSS里面的float 和 position:relative、position:absolute成为那个时代布局常用的方式。

但缺点也是很明显，比如float的浮动消除就要埋坑，position虽然好用，但是对于自适应PC、手机一下就显得力不从心。

一直疲于在解决浏览器兼容和多端显示不一致的时候，出现了Bootstrap他的栅格系统确实好用。随之很长一段时间都没有再找寻布局的新实现方式。直到看到CSS3里面的flex,基本上解决了平面领域所有的布局方式了。

什么是flex?

Flex是Flexible Box的缩写，意为”弹性布局”，也就是说这种布局方式可以让HTML的盒模型有更多布局方式。

弹性布局可以做什么？

基本上目前所有的网页布局都可以由弹性盒模型来实现。
这里介绍几个手机上常用的布局方式
上中下

这种布局需要考虑中部要根据窗口的高度自适应，如果用传统方式，需要将底部固定在最下面，或者需要JS的运算介入;而现在只需要给中部加上一个自动增大的属性就可以实现这个效果。

  
上
  
中
  
下

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;
}