# 布局

基础布局

header
content
<g-layout style="height: 200px; background-color: #eee">
  <g-header style="border: 1px solid #aaa">header</g-header>
  <g-content style="border: 1px solid #aaa">content</g-content>
  <g-footer style="border: 1px solid #aaa">footer</g-footer>
</g-layout>

侧边栏在内容左边

header
sider
content
<g-layout style="height: 200px; background-color: #eee">
  <g-header style="border: 1px solid #aaa">header</g-header>
  <g-layout>
    <g-sider style="border: 1px solid #aaa">sider</g-sider>
    <g-content style="border: 1px solid #aaa">content</g-content>
  </g-layout>
  <g-footer style="border: 1px solid #aaa">footer</g-footer>
</g-layout>

侧边栏在内容右边

header
content
sider
<g-layout style="height: 200px; background-color: #eee">
  <g-header style="border: 1px solid #aaa">header</g-header>
  <g-layout>
    <g-content style="border: 1px solid #aaa">content</g-content>
    <g-sider style="border: 1px solid #aaa">sider</g-sider>
  </g-layout>
  <g-footer style="border: 1px solid #aaa">footer</g-footer>
</g-layout>

侧边栏在整体布局左边

sider
header
content
<g-layout style="height: 200px; background-color: #eee">
  <g-sider style="border: 1px solid #aaa" class="center_flex">sider</g-sider>
  <g-layout>
    <g-header style="border: 1px solid #aaa" class="center_flex">header</g-header>
    <g-content style="border: 1px solid #aaa" class="center_flex">content</g-content>
    <g-footer style="border: 1px solid #aaa" class="center_flex">footer</g-footer>
  </g-layout>
</g-layout>