通常，对于Web布局而言，需要指定两方面的内容：
- 位置
- 大小
首先，对于页面中的元素，分为三种类型：
- 块级元素：自身占据一整行，大小受到width等属性控制
- 行内元素：自身并不占据一整行，大小由自身大小撑开，不受width属性控制
- 行内块元素：兼具上面两者特点，既不占据一整行，但是大小又受到width等属性的控制
合理布局的作用：
- 使内容更加清晰
- 页面载入更快
- 有利于搜索引擎爬取
flex布局
flex即flexbox，意为“弹性布局”，通常可以给任意一个容器加上flex属性，使之成为flex弹性盒。
Flex容器
用于盛放flex布局元素的容器，就是Flex容器，通常可以具有一下属性：
- flex-direction：指定容器内元素排列顺序（四个，左右、上下）
- flex-wrap：控制容器内元素换行
- flex-flow：前两者的混合、
Flex元素
通常Flex元素上的属性包括：
- flex-grow：控制Flex容器的剩余空间的分配
- flex-shrink：
- align-items：控制元素在辅轴上的对齐方式
- justify-content：控制元素在主轴上的对齐方式
Flex适用场景
- 导航栏
- 拆分导航（名称居左，昵称居右，中间空白）
- 绝对底部（flex-grow将元素完全撑开）
