WEB App

一、
　　打开Apache服务器--将手机连到电脑开启的360WiFi--访问目录--手机扫二维码或者输入IP地址（http://10.0.153.186/es6/touch.html）
　　布局视口设为当前设备屏幕的宽度，让网站能够良好的适应移动端窗口。
　　布局方式分为：自适应布局（viewpoint）、响应式布局（媒体查询）、流式布局、table布局、弹性布局。。。
　　
二、
WEB VR
弹性布局　应用的技术是flex
FLEX PC端的flex无法向下兼容，适用于移动端（autoprefixer插件解决兼容问题）

容器属性

display:flex

应用于容器，其子元素是项目。
核心理念： 让容器有能力改变项目的宽度和高度，让其均匀的分布在容器中。
项目默认延主轴排列。

flex-wrap : nowrap| wrap | wrap-reverse

指定项目是否换行
wrap: 换行，正序排列
nowrap:不换行，默认值
wrap-reverse:换行 行倒序排列

flex-direction : row | row-reverse | column | column-reverse

决定主轴方向
row : 默认水平方向（从左向右）
row-reverse : 水平方向 （从右向左）
column : 垂直方向（从上向下）
column-reverse : 垂直方向（从下到上）

缩写形式

flex-flow : flex-wrap flex-direction;

flex-flow : wrap row;

justify-content：flex-start | center | flex-end | space-around | space-between

决定项目在主轴上的对齐方式
flex-start : 沿左侧对齐（一下属性以默认从左向右为例）
center : 沿中间对齐
flex-end : 沿右侧对齐
space-around : 均匀分布（项目两侧留白相等）
space-between :　项目靠两侧对齐

align-items : flex-start | flex-end | center | stretch | baseline

决定项目沿交叉轴的对齐方式（以默认从上到下为例）
flex-start : 沿上方对齐
flex-end : 沿下方对齐
center : 沿中间对齐
baseline：沿文字基线对齐
stretch：默认值 填满整个交叉轴空间

align-content：flex-start | flex-end | center | space-around | strtch

决定多根轴线沿交叉轴的对齐方式（只有换行产生多根轴线时才有效）
flex-start : 沿交叉轴起点对齐
flex-end : 沿交叉轴结束点对齐
center : 沿交叉轴中间对齐
space-between : 沿交叉轴两侧对齐
space-around : 沿交叉轴均匀分布（留白相等）
stretch : 填满整个交叉轴空间

项目属性

flex-grow : [number]

决定项目放大比率（填满主轴剩余空间）
number : 数值 默认为0，值越大，放大比率越大

flex-shrink : [number]

决定项目缩小比率
number ：数值 默认为1 自动缩小，值越大，缩小比率越大

flex-basis : auto | pixel | percent

决定项目放大缩小的基准值
auto：使用项目本身大小计算比率
pixel：使用指定的像素值
percent：使用指定的百分比 100% 当wrap时 项目会占容器的整个宽度；当nowrap时，项目会占容器主轴剩余的宽度（其他放大无效）

align-self ：flex-start | center | stretch | baseline | flex-end

决定项目自身的对齐方式（相对于交叉轴）

order ：[number]

决定项目的顺序，值越小，越靠前，可接受负值

table布局

可以解决自适应问题，应用于后台管理系统、OA...
display:table;
display：table-cell;单元格，自动补display：row和display：table;

column

column-width:400px;
column-count: 5;
columns:400px;
column-gap:50px;栏间距
column-rule:2px dashed red;