display: flex  开启弹性盒子


弹性盒子

作用：快速布局，各种对齐，各种排列

12个属性

6个应用在父元素上
align-items 只有一行元素的时候，让子元素在父容器的Y轴中对齐  center
align-content 多行元素的时候，让多个子元素在父容器的Y轴中对齐  center

justify-content 让子元素在父容器的X轴中对齐  space-around
flex-direction 改变元素的排列方向  row(横着放) column（竖着放）
flex-wrap   wrap 一行排不下的时候，自动换行

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

6个应用在子元素上
order 设置元素顺序，数值越小越靠前
flex-grow 通过设置比例的方式，改变元素所占空间比
flex-shrink: 0; 设置元素的缩小比例，0 表示不要缩小
flex-basis 设置元素的宽度
flex 是flex-grow, flex-shrink 和 flex-basis
一般都是写 flex: 数值  一个参数，表示设置  flex-grow
align-self 允许单个元素设置不同的对齐方式


rem 

尺寸的单位，他可以动态的改变

rem 计算规则

10rem * 16px(html 上默认的font-size的数值)  = 160px

font-size 改变的方式：

1：css 媒体查询 media
2：js 来计算