<template>
    <section class="content element-doc">
      <h2 id="container-bu-ju-rong-qi"><a class="header-anchor" href="#container-bu-ju-rong-qi">¶</a> Container 布局容器</h2>
<p>用于布局的容器组件，方便快速搭建页面的基本结构：</p>
<p><code>&lt;el-container&gt;</code>：外层容器。当子元素中包含 <code>&lt;el-header&gt;</code> 或 <code>&lt;el-footer&gt;</code> 时，全部子元素会垂直上下排列，否则会水平左右排列。</p>
<p><code>&lt;el-header&gt;</code>：顶栏容器。</p>
<p><code>&lt;el-aside&gt;</code>：侧边栏容器。</p>
<p><code>&lt;el-main&gt;</code>：主要区域容器。</p>
<p><code>&lt;el-footer&gt;</code>：底栏容器。</p>
<div class="tip">
<p>以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，<code>&lt;el-container&gt;</code> 的子元素只能是后四者，后四者的父元素也只能是 <code>&lt;el-container&gt;</code>。</p>
</div>
<demo-block>
        <div><p>通过设置 <code>offset</code> 属性来改变吸顶距离，默认值为 0。</p>
</div>
        <template #source><element-demo0 /></template>
        <template #highlight><pre v-pre><code class="html">&lt;el-affix :offset=&quot;120&quot;&gt;
  &lt;el-button type=&quot;primary&quot;&gt;距离顶部 120px&lt;/el-button&gt;
&lt;/el-affix&gt;
</code></pre></template></demo-block><h2 id=""><a class="header-anchor" href="#">¶</a> ??</h2>

      <right-nav />
    </section>
  </template>
  <script lang="ts">
      import * as Vue from 'vue';
      export default {
        name: 'component-doc',
        components: {
          "element-demo0": (function() {
    
    const { createTextVNode: _createTextVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue

const _hoisted_1 = /*#__PURE__*/_createTextVNode("距离顶部 120px")

function render(_ctx, _cache) {
  const _component_el_button = _resolveComponent("el-button")
  const _component_el_affix = _resolveComponent("el-affix")

  return (_openBlock(), _createBlock("div", null, [
    _createVNode(_component_el_affix, { offset: 120 }, {
      default: _withCtx(() => [
        _createVNode(_component_el_button, { type: "primary" }, {
          default: _withCtx(() => [
            _hoisted_1
          ]),
          _: 1 /* STABLE */
        })
      ]),
      _: 1 /* STABLE */
    })
  ]))
}
  
    const democomponentExport = {}
    return {
      render,
      ...democomponentExport
    }
  })(),
        }
      }
    </script>