vue中实现flex弹性布局

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

一、先实现简单的页面

<template>
  <div class="box">
    <div class="top">2222</div>
    <div class="min">
      <div class="left"></div>
      <div class="item">
        <div class="fill">
          <div class="text">
            全面建成小康社会 2012年,中国共产党第十八次全国代表大会报告提出,确保到2020年实现全面建成
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style  scoped >
.box {
  height: 500px;
  padding: 0 20px;
  display: flex;
  flex-direction: colu