简述弹性盒子flex布局及rem布局

flex布局方式
采用flex布局的元素,成为flex为容器,所有的子元素,都包含在容器内,容器存在两个默认的轴
水平主轴
主轴的开始位置(与边框的交叉点)叫做main start结束位置叫做main end
垂直交叉轴
交叉轴的起始位置叫做cross start结束位置叫做cross end
常用属性
flex-direction(决定主轴的排列方向)
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap(默认都在一行显示,该属性课实现换行排列)
nowrap(默认值): 不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content(定义了项目在主轴上的对齐方式)
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items(定义项目在交叉轴上如何对齐)
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content(定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用)
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等，所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值）：轴线占满整个交叉轴

rem布局方式
rem是什么?
rem（font size of the root element）是指相对于根元素的字体大小的单位，简单的说它就是一个相对单位,看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位,它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算
rem布局
原理是，先按定高宽设计出来页面，然后转换为rem单位，配合js查询屏幕大小来改变html的font-size，最终做出所谓的完美自适应
rem使用场景
rem+js是宽度自适应，无法做到高度自适应，所以那些对高度要求很高的rem+js无法实现,改变浏览器宽度，你会发现，页面所有元素的高宽都等比例缩放，也就是大屏幕下导航是横的，小屏幕下还是横的只不过变小了
优点：理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应
缺点：碰到重视高度的设计，或者重视元素间间距的设计，那就玩不开了