html_flex布局

rem定义:
即以根节点（html）的字体大小作为基准值进行长度计算。

假定 html 的 fontSize 为 16px，则 1rem = 16px

如果我们更改 html 的 fontSize，rem 也会更新，总是保持 1rem = 1 fontSize (html)

rem如何使用:

开发过移动端项目的同学应该都知道，不同手机设备的大小是不一样的，在进行移动端开发时，我们通常会为 html 加上 viewport meta。

Flex容器

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

Flex布局

布局父项常见属性：

flex-direction：设置主轴的方向 

justify-content：设置主轴上的子元素排列方式 

flex-wrap：设置子元素是否换行 

align-content：设置侧轴上的子元素的排列方式（多行） 

align-items：设置侧轴上的子元素排列方式（单行） 

flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

布局子项常见属性：

 flex子项目占的份数

align-self控制子项自己在侧轴的排列方式

order属性定义子项的排序顺序（前后顺序）