CSS：rem文字适配，Flex布局

一.rem文字适配

rem是一个相对于根元素字体大小的单位.。

二.Flex布局

Flex翻译为“弹性”，通过给元素设置display属性，属性值为flex或者inline-flex。使其变成弹性容器，容器中的直系子元素就会变为弹性元素。

1.语法

div{

              display: flex;//变成弹性盒

       }

2.布局父项常见属性

flex-direction：设置主轴的方向 ：
    row(默认值):主轴为水平方向，项目排列起点在左端。
    row-reverse:主轴为水平方向,起点在右端。如: flex-direction:row
    column:主轴为垂直方向，起点在上沿如: flex-direction:column
    column-reverse:主轴为垂直方向，起点在下沿。如: column-reverse :flex-direction

justify-content：设置主轴上的子元素排列方式 ：
    flex-start:flex-start:默认值，项目位于容器的开头。
    flex-end:项目位于容器的结尾。
    center:项目位干容器的中心。
    space-between:项目位于各行之间留有空白的容器内。
    space-around:项目位于各行之前、之间、之后都留有空白的容器内。
    initial:设置该屈性为它的默认值。
    inherit:从父元素继承该属性。

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

align-content：设置侧轴上的子元素的排列方式（多行）： 
    align-items:center在侧轴上居中排列
    align-items : flex-start在侧轴上面]顶部排列
    align-items: flex-end在侧轴上面底部排列
    align-itens:stretch拉伸:不能设置子元素的高度

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

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

3.布局子项常见属性

flex子项目占的份数

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

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