弹性盒子

flex ：   1           1             1200px；
          flex-grow  flex-shrink    flex-basis   
          放大        缩小           宽度

1 定义

弹性盒子模型，方向 flex -direction 、 justify-content 、flex-wrap（换行方式）

注：方向 flex -direction 和 flex-wrap（换行方式）结合成 flex-flow

2 flex:1

实现子元素的自适应

flex： 1     //最小化尺寸，            适合等比例列表
flex：auto //根据大小最大化尺寸， 适合充分利用剩余空间，比如头部导航文字

flex: 0 1 auto  //默认,不放大会缩小
flex:

3.用flex实现基本的头尾布局

.content{
   display：flex；
   flex-direction：row;
   height:100vh;
}
//结构
.f- head{

}

.f-body{
  flex:auto; //或flex：1  因为flex-grow是控制flex元素相对于其他元素是否可扩展
}

.f-footer{
  flex-shrink:0;
}