vue中实现flex弹性布局

       我是一个前端的新手，对于页面布局这一块没有具体去思考过，直到最近因为公司的系统需要我负责项目的整体布局layout模块，我这才开始细细思考这一个问题。flex是很好的弹性盒子，我之前虽然有在用但是却只是简单使用垂直水平居中的属性，对于其他强大的能力一窍不通。好了废话少说，开始记录我的第一个布局吧。（默认大家都会简单使用flex了）

一、先实现简单的页面

.box {
  height: 500px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  background-color: #cccccc;
}
.top {
  height: 50px;
  width: 100%;
  background-color: aqua;
}
.min {
  display: flex;
  align-items: center;
}
.left {
  width: 150px;
  height: 120px;
  line-height: 30px;
  background-color: orange;
}
.item {
  height: 120px;
  line-height: 40px;
  background-color: #ff0000;
}

效果如下：

      简单页面出来了左边也是150px，那右边宽度没有布满剩下的空间，这该怎么办呢？如果按照我之前的办法是直接写死右边的宽度，但是这样就没有宽度实行性可言了，因为大小固定了，浏览器窗口物流怎么改变它的大小都无法随之适应。那有没有一个好的方法来实现它自动计算剩下空间呢？

二、flex盒子 中的 flex-grow

flex-grow 属性用于设置或检索弹性盒子的扩展比率，其实就是自动计算容器中剩下的空间，然后把它自动赋给使用的元素。需要注意的是：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。也就是说使用 flex-grow ,其父级必须使用flex弹性盒子。

那么我们来改变一下css试试，把它改为

.item {
  flex-grow: 1;
  height: 120px;
  line-height: 40px;
  background-color: #ff0000;
}

这时候我们看到的结果是：

这时候，左右两边已经布满整个页面了

三、改变浏览器视图大小看看效果如何

       咦？不对啊，我们明明已经给左边设置了150px的宽度，前面的也都是这个宽度，到了这里怎么变小了而且还在不断变小，这是怎么回事呢？原来使用flex-grow的时候虽然能够自动计算剩余的空间，但是也会计算内容所需要的空间，当内容所需空间大于剩余空间时就会把其他的兄弟元素给挤压了，那这该怎么办，总不能不让人家的视图窗口改变大小吧。这时候就需要用到flex中的另一个属性flex-shrink了。

四、flex 之 flex-shrink

       flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。需要注意的是：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。也就是说使用 flex-shrink,其父级必须使用flex弹性盒子。

那么我们来试试这个属性好不好用吧。修改一下css，改为：

.left {
  flex-shrink: 0;
  width: 150px;
  height: 120px;
  line-height: 30px;
  background-color: orange;
}

效果如何：

咦？好了左边的区域还是150px大小没有改变，右边的宽度也能布满容器，这是怎么回事呢？这是因为flexs-shrink属性就是用来控制flex元素的压缩规则的，设置为0，那就是不压缩，这样在窗口大小改变的时候就不会被挤压变形了，简单的弹性布局就这样了。