Flex布局
是一种浏览器提倡的布局模型布局网页更简单、灵活避免浮动脱标的问题
设置方式： 父元素添加 display：fle
主轴对齐方式：justify-content
在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。
修改主轴对齐方式属性: justify-content
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值, 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | 沿主轴居中排列 |
| space-around | 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
| space-between | 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 |
| space-evenly | 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等 |
侧轴对齐方式:align-items
修改侧轴对齐方式属性:
align-items（添加到弹性容器）
align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值, 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | center |
| stretch | 默认值, 弹性盒子沿着主轴线被拉伸至铺满容器 |
ps:
弹性容器的特点：
1.默认宽度为父盒子的宽度，高度由内容所撑开
弹性盒子的特点：
1.默认宽度由内容所撑开，默认高度为父盒子的高度；
2.弹性盒子没有块级元素、行内元素、行内块元素之分，统统叫做弹性盒子；
3.默认不会换行，会沿着主轴方向一行显示
a链接被点击的时候，会出现一个默认的半透明灰色背景，为了去除这个背景：
-webkit-tap-highlight-color: transparent
