移动端特点
1. 百分比布局
百分比布局，也叫流式布局。
百分比布局特点：宽度自适应，高度固定。
2. fllex布局
flex布局极大的提高了我们布局的效率，更简单、灵活。
注意：display: flex; 一定要给**亲爸爸**加。
2.1 主轴对齐方式
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值, 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | 沿主轴居中排列 |
| space-around | 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
| space-between | 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 |
| space-evenly | 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等 |
2.2 侧轴对齐方式
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值, 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | 沿侧轴居中排列 |
| stretch | 默认效果，弹性盒子沿着侧轴线被拉伸至铺满容器 |
2.3 伸缩比
把父盒子分为若干份数，每个子盒子各占几份。
注意：flex:1; 一定给子盒子加。子盒子默认高度会和父盒子一样高。
2.4 圣杯布局
所谓圣杯布局就是左右两边大小固定不变，中间宽度自适应。 一般这种布局方式适用于各种移动端顶部搜索部分，这是最常见的，如京东手机版主页面顶部搜索。
核心思路：
- 两侧盒子写固定大小。
- 中间盒子 flex: 1; 占满剩余空间。
注意：中间flex: 1; 和 width 有冲突。 优先执行 flex：1；
2.5 设置主轴方向
主轴默认是水平方向, 侧轴默认是垂直方向。
修改主轴方向属性: flex-direction
| 属性值 | 作用 |
|---|---|
| row | 行，水平（默认值） |
| colum | 列，垂直 |
| row-reverse | 行，从右向左 |
| column-reverse | 列，从下向上 |
flex-direction：column;
修改完毕，主轴是Y轴， 侧轴是X轴。
2.6 弹性盒子换行
特性： 给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，不会自动换行。
弹性盒子换行显示 : flex-wrap: 语法：
flex-wrap: wrap;
2.7 多行盒子设置侧轴对齐方式
用align-content实现多行盒子侧轴对齐方式。
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值, 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | 沿主轴居中排列 |
| space-around | 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
| space-between | 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 |
| space-evenly | 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等 |
2.8 小结
- 在flex眼中，标签不再分类。
- 简单说就是没有块级元素，行内元素和行内块元素。
- 任何一个元素都可以直接给宽度和高度一行显示。
- 当然存在兼容性问题，如果不考虑兼容性可以大量使用，如果是移动端则不用考虑直接flex。
- caniuse.com/ 可以查看兼容性。
