1. flex布局

在CSS3中flex可以非常便捷的可以帮助我们实现对页面的布局。

• 传统的页面布局，基于div+float来实现。
• flex可以快速实现页面的布局（很方便）。

关于flex布局你必须要了解的有一下几点：

    
112
    
113

1.1 容器

1.1.1 flex布局

在容器元素上应用

(资料图片仅供参考)

    
112
    
113

1.1.2 元素的方向（主轴和副轴）

    
112
    
113

1.1.3 元素排列方式

justify-content，主轴上的元素的排列方式align-items，副轴上的元素的排列方式。

    
11
    
112
    
112

    
11
    
112
    
112

1.1.4 换行

• flex-wrap: nowrap;元素超过容器，不换行
• flex-wrap: wrap;元素超过容器，换行

示例1：不换行

    
11
    
112
    
112
    
112
    
112

示例2：换行

    
111
    
112
    
112
    
112
    
112

1.1.5 多行对齐方式

align-content用于控制多行元素的对齐方式，如果元素只有一行则不会起作用；默认stretch，即在元素没设置高度，或高度为auto情况下让元素填满整个容器。

flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);

1.2 元素

1.2.1 顺序

order，默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。

    
11
    
22
    
33

1.2.2 剩余空间

flex-grow，默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；

    
Redmi k60
    
Xiaomi 13
    
Redmi Note 12
Redmi K60
    
Redmi k60 Pro

案例：flex页面布局小米商城

<script>    export default {        name: "Mi"    }</script>

至此，结合以上的知识点，我们就可以来开发一个项目。

2. ElementUI

Element，是有 饿了吗 团队开发一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库（也支持vue3.x）。

在他的基础上来开发，可以大大提升开发进度。

想要在项目中进行使用element-ui需要提前安装并引入。

2.1 引入

方式1：完整引入

• 安装

  cd 项目目录npm install element-ui

• 引入

  import Vue from "vue";import ElementUI from "element-ui";import "element-ui/lib/theme-chalk/index.css";import App from "./App.vue";Vue.use(ElementUI);new Vue({    render: h => h(App),}).$mount("#app")

• 在组件中使用

          Default        Primary        Success        Info        Warning        Danger      

方式2：局部引入

• 安装

  cd 项目目录npm install element-ui

• 引入

  import Vue from "vue";import { Button, Select } from "element-ui";import "element-ui/lib/theme-chalk/index.css";import App from "./App.vue";Vue.use(Button)Vue.use(Select)new Vue({    render: h => h(App),}).$mount("#app")

• 在组件中使用

  哈哈哈

  完整组件名称：https://element.eleme.cn/#/zh-CN/component/quickstart

2.2 组件的使用

参见官方文档，在后续的项目开发中来应用并使用。

关键词：