flex布局
Flex 布局语法教程 | 菜鸟教程 (runoob.com)
容器的属性：
- flex-direction： 决定主轴的方向（即子 item 的排列方法）flex-direction: row | row-reverse | column | column-reverse;
- flex-wrap： 决定换行规则 flex-wrap: nowrap | wrap | wrap-reverse;
- **flex-flow: ** < flex-direction > < flex-wrap >;
- justify-content： 对齐方式，水平主轴对齐方式 flex-start | flex-end | center | space-between | space-around
- align-items： 对齐方式，竖直轴线方向 flex-start | flex-end | center | baseline | stretch;
- align-content： 定义了多根轴线的对齐方式flex-start | flex-end | center | space-between | space-around | stretch;如果项目只有一根轴线，该属性不起作用。
项目的属性（元素的属性）：
- order 属性： 定义项目的排列顺序，顺序越小，排列越靠前，默认为 0
- flex-grow 属性： 定义项目的放大比例，即使存在空间，也不会放大
- flex-shrink 属性： 定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果 定义个 item 的 flow-shrink 为 0，则为不缩小
- flex-basis 属性： 定义了在分配多余的空间，项目占据的空间。
- flex属性： 是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。
- align-self： 允许单个项目与其他项目不一样的对齐方式，可以覆盖
rem布局
设置1rem为font-size多少px，可以在不同设备上等比缩放 优点:适用于移动端 缺点：pc利用率不高；所有盒子都要计算px转rem；需要用js控制font-size大小
百分比布局
用%单位设置宽高 缺点：计算困难；布局复杂
浮动布局
float属性脱离文档流 优点：图文混排 缺点：脱离文档流后父级元素高度塌陷
