1.谁是弹性盒，谁写（一般是父元素）Display:box 如果不兼容写：display:-moz-box
Display:-webkit-box;
Display:-o-box;
Display:-ms-box;
Display:box;
2.父元素决定子元素的排列方向 box-orient：horizontal（水平 默认的）
Vertical(垂直排列、纵向)
3.父元素决定子元素的显示顺序 box-direction ：reverse（倒序）
4．依然给父元素设置，父元素决定子元素的对齐方式：
水平对其：box-pack:start center end (左中右)
垂直对齐：box-align： start center end (上中下)
以上四个都是写给父元素的。
5.子元素设置分配空间
Box-flex：1 2 3 4 写的数字越大，占空间越大
6.子元素位置的改变：box-ordinal-group:1 2 3 4写数值，很少用
<meta name=”viewport” content=”width=device-width,initial-scale=1.0”
第三个是初始化缩放，1.0 就是禁止缩放
第二个值是宽度等于设备宽度
第一个是虚拟窗口意思，就是模拟手机等设备
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
当http-equiv="X-UA-Compatible"这句话是遇上IE8的时候以后面最新版本的IE渲染
IE=edge 以最新版本IE显示 chrome=1 而当机器上安装的IE没法渲染就用谷歌浏览器的内核进行渲染
弹性盒子手机布局
分为上中下三个部分，山下给固定的高度45px或者44px ，然后让中间.main部分加上box-flex:1；也就是让剩余的空间全部给中间；【保证html body 最外层的父亲宽高都是100%】
弹性盒布局(懂懂)
给父元素加的属性:
首先，父元素加上一个display: flex;让其变成弹性盒 此时,其子元素会默认横向排列起来，类似浮动的效果
属性1：flex-direction:(决定子项在flex容器中的位置)
flex-direction: column; 从上到下排列,从父级上面开始[即纵向从上往下排列（顶对齐）]
flex-direction: column-reverse; 从下到上排列（ 最后一个元素在最前面）并且从父级底下开始
flex-direction: row;(默认值) 即横向从左到右排列（左对齐）
flex-direction: row-reverse; 对齐方式与row相反
属性2：flex-wrap:(规定子项是否换行)
flex-wrap: nowrap;/*默认样式，超出不换号，自己平均缩小*/
flex-wrap: wrap;
flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse; 超出部分换行，并且反向 仅仅是行反转，单个子元素不变
属性3 flex-flow：/*这个属性是direction 和wrap的复合属性*/
属性4 justify-content 【默认值flex-start 】
justify-content:flex-start; /*子元素左对齐*/
justify-content:flex-end; /*子元素右对齐*/
justify-content: center; /*子元素居中对齐*/
justify-content: space-around;/*//平均分布 两边会有间距*/
justify-content: space-between; /*两边对齐中间平均分布【两边靠边了，中间的平分】*/
属性5 align-content: flex-start; 本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的 <' justify-content '> 属性类似。请注意本属性在只有一行的伸缩容器上没有效果
align-content: flex-start; /*如果父容器高度大的话原本是行之间平分父容器，有空隙. 加上后 行---上对齐*/
align-content: flex-end;
align-content: center;
align-content:space-around;/*让行平均分布 最上和最底下还是会有中间行空隙的一半*/
align-content: space-between;/*让行平均分布 最上和最底下无空隙，其余平分空隙*/
align-content: stretch; 『默认值，子元素没有高度时默认会扩大高度，子元素加起来高度充满父元素』
属性6 align-items: 定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
align-items:flex-start; 垂直方向上对齐 左上方
align-items: flex-end; /*垂直方向下对其*/
align-items: center;/*居中对齐*/
align-items:stretch; /*这个属性是个默认值，如果这个元素的子元素没有给高度，子元素会垂直充满容器，给高度的话不起作用*/
align-items: baseline;/*子元素以当前行的首行文字为基准对其*/
加给子元素的
1.Order 默认是0 用整数值来定义排列顺序，数值小的排在前面。可以为负值。
2.flex-grow: 1; 分配剩余空间的 默认是0//*把父级元素剩下的分成grow的份数,此元素占的份数，比方说自己都规定了自己的宽度是30，五个子集，父级300，那么只有一个孩子写grow的话，这个孩子就是本身的50+（300-150 ）| 如果有有两个孩子写了这个属性一个值是1一个是2 那么这两个孩子就是本身的50 加上把剩下的300-150=150分成三份，这俩再分别加上100 （2份的）和50（1份的） */
3.flex-shrink: 0;
用数值来定义收缩比率。不允许负值 默认1
/*当容器宽度不够,shrink为0的元素不会缩小 shrink为其他的数，是缩小的倍数，（不是它本身定义宽度的一半，而是其它那些经过挤压后的子元素的）比分说2就是其它的一半，3就是三分之一，所有默认值是1*/
4.flex-basis: 100px; <length>：用长度值来定义宽度。不允许负值
<percentage>：用百分比来定义宽度。不允许负值
auto：无特定宽度值，取决于其它属性值
content：基于内容自动计算宽度
5.flex是 grow shrink basis的缩写
6.align-self: flex-end;定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
/*可以控制单个元素的上中下排列方式*/值：auto | flex-start | flex-end | center | baseline | stretch
手机端页面
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<script>
fontSize();
function fontSize() {
var w = window.innerWidth/10;
var html= document.querySelector("html");
html.style.fontSize=w + "px";
}
// 当窗口的大小发生改变的时候会触发
window.onresize = fontSize;
</script>
将这段话加上，时时监控窗口大小用的