css弹性布局和手机自适应

css手机自适应
viewport 视口
width=device-width 宽度等于屏幕的宽
initial-scale=1.0 伸缩比例为1.0
maximum-scale=3.0 最大伸缩比例
minimum-scale=1.0 最小伸缩比例
user-scalable=no 禁止用户缩放
例如：
< meta name=“viewport” content=“width=device-width,initial-scale=1.0,maximum-scale=3.0,minimum-scale=1.0,user-scalable=no”>

/固定模式布局 流动布局100% 弹性布局 flex （手机移动端 类似于table）/
1. display:flex; 把容器转化为弹性布局
2.flex-direction: column; 规定里面的元素按照什么方式来布局 row column 翻转
3.align-items 子元素在y 轴上对其的方式 center 居中 flex-end 底边 flex-start 上边 stretch 垂直拉伸
4.justify-content x轴对齐 center 居中 flex-end 右边对齐 flex-start 左边对齐 space-between 左右两边对齐 中间平分pace-around 均分所有空白
5.flex-wrap: wrap; 控制行里面 进行换行
6.align-content: space-between; 在行里面使用 行留白的时候有效果
7.flex: 1; 行里面的元素进行分配空间 按等份分配

    .fl{
        width: 400px;
        height: 600px;
        border: 1px solid red;
        margin: auto;
        display:flex;
        flex-direction: column;
    }
    .row,.row1{
        width: 400px;
        height: 100px;
        border-bottom: 1px solid blue;
        display: flex;/*转为flex*/
        flex-direction: row;
       /* align-items  子元素在y 轴上对其的方式  center 居中  flex-end  底边  flex-start  上边  stretch 垂直拉伸*/
       /* align-items:stretch;*/
        /*justify-content x轴对齐   center 居中  flex-end 右边对齐  flex-start  左边对齐  space-between 左右两边对齐 中间平分
        space-around  均分所有空白*/
       /* justify-content: center;*/
       /* align-items: center;*/

        flex-wrap: wrap;
        /*当前行里面有剩余的空白  */
        align-content:space-between;

    }
    .row>div{
        width: 50px;
        height: 30px;
        border: 1px solid black;
    }
    .row1>div{
        /*给每个元素分配空间  flex*/
       /* flex: 10;*/
        width: 50px;
        height: 30px;
        border: 1px solid black;
    }
   /*.row1>div:nth-child(1){
        flex: 1;
    }
    .row1>div:nth-child(2){
        flex: 2;
    }
    .row1>div:nth-child(3){
        flex: 3;
    }
    .row1>div:nth-child(4){
        flex: 1;
    }*/


    .row2>div{
        width: 100px;
        height: 40px;
        border: 1px solid red;
    }