flex 弹性盒子

为了实现网页快速（很多事情交给浏览器去做）布局

布局兼容

13个css属性

第一个，开启弹性盒子(父元素身上)：
display: flex;

6个应用在父元素上的

flex-direction   设置元素排列方向 默认 row，可以设置 column 实现垂直放
flex-wrap        设置元素换行的，前提：手动设置一行放不下的条件才会换行
justify-content  设置元素在X轴的对齐方向
align-items      单行的时候设置元素在Y轴的对齐方向
align-content    多行的时候设置元素在Y轴的对齐方向

flex-flow        flex-direction 和 flex-wrap 的简写

6个应用在子元素上的
order            改变元素的排列顺序，数值越小，越靠前
flex-grow        设置元素的放大比例
flex-shrink      设置元素的缩小比例 （0 是不缩小）
flex-basis       和width类似，主要用来设置元素宽度
flex             一个数值的时候是 flex-grow 的意思
align-self       允许某个元素在垂直方向设置不一样的对齐方式


rem 一种可以动态改变大小的字体尺寸单位

你写的尺寸 10rem *  html上默认的font-size 16 == 160px

如何动态改变rem的 font-size 基准值

1：媒体查询
2：js实现