定义：浏览器显示页面内容的屏幕区域 在不同大小的屏幕下，视口是不同的
语法:
user-scalble 表示用户是否可以缩放（0-no,1-yes） initial-scale 表示初始缩放比例 maximum-scale 用户对页面的最大缩放比例 minimum-scle 最下缩放比例
对比传统的页面布局， flex操作简单，布局方便，移动端使用广泛但在pc端布局浏览器支持较差
特点: 任何一个标签都可以使用flex标签成为容器， 其子标签的clear,float,vertical-align等属性会失效 通过行与列的思想布局
采用flex布局的元素被称为flex容器（flexcontainer）简称容器 它的子元素成为flex项目（flexitem） 简称项目
控制主轴上的元素的各种各样的对齐方式 类似：word里的左对齐，右对齐，居中对齐，分散对齐； 语法：justify-content:flex-start //默认值
值示意flex-start从头部开始（例；x轴是主轴即是从左到右）flex-end从底部开始center在主轴居中对齐space-around平分剩余空间space-between先把两边贴边再平分剩余空间控制子元素是否换行； 语法：flex-wrap:nowrap /* 默认值 ； flex-wrap:nowrap; 子项目加起来的宽度超过父级的宽度时，子项宽度会被缩小，宽度只是不生效，必须设置
flex-wrap:wrap; 换行； 子项的总宽加起来超过父级宽度，就会换行
该属性是控制子项单行在侧轴（默认是y轴）上的对齐方式**(在子项为单项（单行）的时候使用**)
整体一行元素看成整体，设置在侧轴上的对齐方式
值示意flex-start从上到下flex-end从下到上center挤在一块居中stretch拉伸设置子项在侧轴上的排列方式 ，(用于子项出现换行的情况或者多行)
值示意flex-start在侧轴上从上到下flex-end在侧轴上从下到上center在侧轴上居中space-around在侧轴上平分剩余空间space-between在侧轴上先把两边贴边再平分剩余空间stretch在侧轴上平分父类空间（拉伸）.item { // 百分比或者是1~10的数字 flex: 20%}（//或者 2;
控制子项，自己在侧轴上的对齐方式； 默认值auto，父级设置了align-items ，auto继承父级元素上设置侧轴的对齐方式：align-items 属性； 如果父级没有设置align-items 属性，auto默认值会变为strecth
值示意flex-start在侧轴上从上到下flex-end在侧轴上从下到上center在侧轴上居中stretch侧轴上拉伸根据屏幕不同的大小 变换 比较生硬 max-wudth = x 表示小等于 如果要设置400 以下 的就要用399 第二个 由于后面有 别的屏幕 限制 可以省略 min-wudth
rem是一个相对单位 作用：让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。 方案：使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大 小变化元素尺寸也会发生变化，从而达到等比缩放的适配。 用法:rem单位，可以控制整个页面所有元素有关PX类；（宽、高、padding、margin、top…）只要是你设置数值 的地方都可以实现控制； root: 1rem代表HTML的font-size大小；
不能计算 如果要使用比较有小数之类的计算 可安装 easy less 扩展
版心： 浏览器显示内容与屏幕之间的留白 （更加好看，优化用户体验）
BootStrap框架 可非常快地搭建出响应式页面； 中文网：http://www.bootcss.com/
