elementui 容器布局，el-header/el-footer在组件内显示不正常

用elementui布局，怎么导航啊，左侧菜单啊就左右排列了，类似下图

入口

<template>
  <el-container direction="vertical">
    <OutLayoutHeader></OutLayoutHeader>
    <el-container direction="vertical">
      <el-container>
        <OutLayoutSlideMenu></OutLayoutSlideMenu>
        <el-main>Main</el-main>
      </el-container>
      <OutLayoutFooter></OutLayoutFooter>
    </el-container>
  </el-container>
</template>

<script>
import OutLayoutHeader from './components/OutLayout/Header.vue'
import OutLayoutSlideMenu from './components/OutLayout/SlideMenu.vue'
import OutLayoutFooter from './components/OutLayout/Footer.vue'

export default {
  name: 'app',
  components: {
    OutLayoutHeader,
    OutLayoutSlideMenu,
    OutLayoutFooter
  }
}
</script>

header部分，很简单，只为显示

<template>
  <el-header>Header</el-header>
</template>

footer部分一样，很简单，只为显示

<template>
  <el-footer>Footer</el-footer>
</template>

官网的示例代码里，footer是和main放在一个容器中的。

入口部分在两个el-container中增加了两个属性，direction="vertaical"。
官网说明：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

这里如果不加direction属性，header和footer都在组件中，那么久会按左右排列。footer从最内层移出是因为el-main和slideMenu组件部分不需要
垂直上下排列。