Layout 布局 #

<template>
  <vi-flex class="vi-flex-demo" direction="column">
    <vi-header>header</vi-header>
    <vi-main>main</vi-main>
  </vi-flex>
</template>

<style lang="scss">
.vi-flex-demo {
  .vi-header,
  .vi-footer { 
    background-color: var(--doc-example-footer-bg-color);
  }
  .vi-main { 
    padding: 100px 0;
    background-color: var(--doc-example-main-bg-color); 
  }
  .vi-aside { 
    padding: 100px 18px;
    background-color: var(--doc-example-aside-bg-color);
  }
  .vi-header,
  .vi-main,
  .vi-aside,
  .vi-footer {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

<template>
  <vi-flex class="vi-flex-demo" direction="column">
    <vi-header>header</vi-header>
    <vi-main>main</vi-main>
    <vi-footer>footer</vi-footer>
  </vi-flex>
</template>

<template>
  <vi-flex class="vi-flex-demo" direction="column">
    <vi-header>header</vi-header>
    <vi-flex class="vi-flex-demo">
      <vi-aside>aside</vi-aside>
      <vi-main>main</vi-main>
    </vi-flex>
  </vi-flex>
</template>

<template>
  <vi-flex class="vi-flex-demo" direction="column">
    <vi-header>header</vi-header>
    <vi-flex class="vi-flex-demo">
      <vi-aside>aside</vi-aside>
      <vi-main>main</vi-main>
    </vi-flex>
    <vi-footer>footer</vi-footer>
  </vi-flex>
</template>

<template>
  <vi-flex class="vi-flex-demo" direction="column">
    <vi-header>header</vi-header>
    <vi-flex class="vi-flex-demo">
      <vi-aside>aside</vi-aside>
      <vi-flex direction="column">
        <vi-main>main</vi-main>
        <vi-footer>footer</vi-footer>
      </vi-flex>
    </vi-flex>
  </vi-flex>
</template>

<template>
  <vi-flex class="vi-flex-demo">
    <vi-aside>aside</vi-aside>
    <vi-flex class="vi-flex-demo" direction="column">
      <vi-header>header</vi-header>
      <vi-flex direction="column">
        <vi-main>main</vi-main>
        <vi-footer>footer</vi-footer>
      </vi-flex>
    </vi-flex>
  </vi-flex>
</template>