横向左中右布局，中间宽度自适应实现

目的用于实现左中右元素横向布局，左侧和右侧元素宽度固定，中间宽度可随可视区域拉伸而自适应。

布局demo

<div class="relative flex full-width">
    <div id="layout-left" class="flex-item">1</div>
    <div id="layout-middle" class="flex-item">2</div>
    <div id="layout-right" class="flex-item">3</div>
</div>

样式demo

.full-width {
  width : 100%;
}

.relative {
  position : relative;
}

.flex {
  display : -webkit-flex;
  display : flex;
}

#layout-left {
  width      : 10rem;
  background : red;
}

#layout-middle {
  width      : 100%;
  background : blueviolet;
}

#layout-right {
  width      : 20rem;
  background : green;
}

以上。