水平/垂直弹性布局

实现两头固定宽度，中间动态100%动态调整样例

<template>
  <div class="wrapper">
    <div class="aside-left" style="min-width:170px;">
    </div>
    <div class="main">
    </div>
    <div class="aside-right" style="min-width: 150px;">
    </div>
  </div>
</template>

<div class="ver-wrapper">
  <div class="aside-query">
  </div>
  <!-- 表格 -->
  <div class="ver-main">
  </div>
  <div class="aside-pagination">
  </div>
</div>

/*****************************************/

// 布局参考：Flex 布局教程：语法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
// 父类
//设置或检索伸缩盒对象的子元素在父容器中的位置 flex-direction: row | row-reverse | column | column-reverse
//设置或检索伸缩盒对象的子元素超出父容器时是否换行 flex-wrap: nowrap | wrap | wrap-reverse
//设置或检索伸缩盒对象的子元素排列方式 flex-flow: <‘flex-direction’> || <‘flex-wrap’>
//设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式 justify-content: flex-start | flex-end | center | space-between | space-around
// 子类
//设置或检索弹性盒的扩展比率。 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。 flex-grow: <number> (default 0)
//设置或检索弹性盒的收缩比率（根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。）flex-shrink: <number> (default 1)
//设置或检索弹性盒伸缩基准值 flex-basis: <length> | auto (default auto)
// flex (适用于弹性盒模型子元素) flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
.wrapper
  display -webkit-box
  display -moz-box
  display -ms-flexbox
  display -webkit-flex
  display flex // display: flex | inline-flex; (适用于父类容器元素上)
  -webkit-flex-flow row wrap
  //justify-content flex-start //定义了项目在主轴上的对齐方式（默认值）：左对齐
  .main
    flex 1 100%
  .aside-left
    flex:0 0
  .aside-right
    flex:0 0

/////////////////////////////////  垂直方向 ////////////////////////////////
//设置或检索弹性盒的扩展比率。 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。 flex-grow: <number> (default 0)
//设置或检索弹性盒的收缩比率（根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。）flex-shrink: <number> (default 1)
//设置或检索弹性盒伸缩基准值 flex-basis: <length> | auto (default auto)
// flex (适用于弹性盒模型子元素) flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
.ver-wrapper
  display -webkit-box
  display -moz-box
  display -ms-flexbox
  display -webkit-flex
  display flex // display: flex | inline-flex; (适用于父类容器元素上)
  -webkit-flex-flow column wrap
  flex-direction column
  height 100%
  .ver-main
    flex 1 100%
  .aside-query
    flex:0 0
    //min-height 38px
    //height 38px
  .aside-pagination
    flex:0 0
    min-height 30px
    height 30px