flex + rem

flex : 布局的自动适配

13个属性

第一个

display: flex 开启弹性盒子


应用在父元素 6

justify-content 设置水平方向对齐
align-items   设置垂直方法对齐
flex-direction 设置元素的对齐方式（垂直对齐还是水平对齐）
flex-wrap 设置元素是否换行

不常用
flex-flow: <flex-direction> || <flex-wrap>;
align-content  设置多根轴线的对齐方式


应用在子元素 6
order   设置元素的排列位置，数值越小越靠前
flex-grow 根据设置的比例自动占剩余空间
flex-shrink 元素开启弹性盒子后，默认数值为1，将压缩元素，我们希望不压缩的时候可以通过这个属性来设置：0
场景：横向滑动
flex-basis  设置元素宽度，优先级比width高
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self  运行某个元素设置不同的对齐方式（垂直方向）

rem ：尺寸的自动适配

设置一个基准值，你写的  尺寸 * 基准值 == 实际的宽高 

10px  --> 10rem

默认16px

盒子模型 预留

自动换行

css3 完成

rem 完成

给你们UI图，教你们切图 完成

带你们写一个psd，剩下的给你们自己写  完成

pc 页面