Element UI 的一些布局组件用法（elementui flex布局）

Element UI 提供了一些布局组件，帮助开发者快速构建响应式和灵活的页面布局。以下是主要的布局组件介绍：

### 1. **Container（容器）**

`<el-container>` 是一个基础布局组件，常用于建立整个页面的结构。

```vue

<el-container>

<el-header>头部</el-header>

<el-aside width="200px">侧边栏</el-aside>

<el-main>主要内容</el-main>

<el-footer>底部</el-footer>

</el-container>

```

### 2. **Header（头部）**

`<el-header>` 用于定义页面的头部区域，通常放置导航或标题。

### 3. **Aside（侧边栏）**

`<el-aside>` 用于定义侧边栏，可以放置菜单或其他辅助内容。

### 4. **Main（主要内容）**

`<el-main>` 表示主要内容区域，通常用于放置页面的核心内容。

### 5. **Footer（底部）**

`<el-footer>` 用于定义页面的底部区域，常用于版权信息或其他链接。

### 6. **布局示例**

以下是一个完整的示例，展示如何组合这些组件：

```vue

<template>

<el-container style="height: 100vh;">

<el-header>头部</el-header>

<el-container>

<el-aside width="200px">侧边栏</el-aside>

<el-main>主要内容</el-main>

</el-container>

<el-footer>底部</el-footer>

</el-container>

</template>

```

### 7. **布局属性**

- **Flexbox**：Element UI 的容器组件使用 Flexbox 布局，可以通过 CSS 特性来控制子组件的排列和大小。

- **响应式**：可以通过设置 `width` 和 `height` 属性来实现响应式布局。

### 8. **栅格布局**

虽然 Element UI 主要使用 Flexbox，但你也可以使用栅格布局来实现更复杂的布局需求。可以结合 `<el-row>` 和 `<el-col>` 组件来实现。

```vue

<el-row>

<el-col :span="8">列1</el-col>

<el-col :span="8">列2</el-col>

<el-col :span="8">列3</el-col>

</el-row>

```

### 总结

Element UI 的布局组件提供了一种简单有效的方法来构建页面结构。通过组合这些组件，开发者可以快速创建响应式和灵活的用户界面。