大屏定位layout

最近写了两个大屏，对于大屏的定位，对于父元素采用 display:flex 布局,设置 height:100%或者width：100%来填充整个空间，内部子栏通过百分比来分割开来。 `

<a-layout class="full-screen">
<!--导航start-->
  <a-layout-header class="screen-header">
    <!--LOGO和系统名称-->
    <div style="flex: 0 0 400px;">
      <div class="logo">XXXX管理系统</div>
    </div>
     <!--LOGO和系统名称 end-->
     
     <!--导航具体内容-->
    <div style="flex: auto;display: flex;">
      <a-menu
        theme="dark"
        mode="horizontal"
        :default-selected-keys="['2']"
        :style="{ lineHeight: '64px' }"
        style="background: transparent;"
      >
      </a-menu>
    </div>
     <!--导航具体内容end-->
     
    <!--时间-->
    <div style="flex: 0 0 280px;font-size: 16px;">
      <timer></timer>
    </div>
     <!--时间end-->
     
  </a-layout-header>
  <!--导航end-->
  
  <!--内容start-->
  <a-layout-content>
    <div class="flex-column height-full">
      <div style="height: 72%;" class="flex-row">
        <div style="width: 25%;" class="flex-column">
          <div style="flex: 0 0 200px;">
            <div class="title">
              标题1
            </div>
          </div>
          <div style="flex: auto">
            <div class="title">
              标题2
            </div>
          </div>
        </div>
        <div style="width: 50%;" class="height-full width-full">
          
        </div>
        <div style="width: 25%;" class="flex-column">
          <div style="flex: 0 0 200px;">
            <div class="title">
              标题3
            </div>
          </div>
          <div style="flex: auto">
            <div class="title">
              标题4
            </div>
          </div>
        </div>
      </div>
      <div style="height: 28%;" class="flex-row">
        <div style="width: 25%;">
          <div class="title">
            标题4
          </div>
        </div>
        <div style="width: 25%;">
          <div class="title">
            标题4
          </div>
        </div>
        <div style="width: 25%;">
          <div class="title">
            标题4
          </div>
        </div>
        <div style="width: 25%;">
          <div class="title">
            标题4
          </div>
        </div>
      </div>
    </div>
  </a-layout-content>
<!--内容end-->
</a-layout>

比较重要的几个css如下：

.full-screen {
  background: url("~@assets/bg.jpg");
  width: 100%;
  height: 100%;
  color: #fff;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.height-full{
  height: 100%;
}

.width-full{
  width: 100%;
}

.flex-row{
  display: flex;
  flex-direction: row;
}

.flex-column{
  display: flex;
  flex-direction: column;
}

最终的效果如下：