css 移动端弹性布局

优先在父盒子上设置：

    display: flex;

父属性：

justify-content: 主轴的布局模式

flex-direction:确定主轴的方向 （确定是X还是Y）

flex-wrap: 是否换行展示

align-items: center;  子模块盒子的布局方式设定

align-content: space-between; 子模块盒子的布局方式设定（适用于多行）

子属性：

flex:number 可以设置这个子元素占多少份

div:nth-child(2){
    flex: 1;
    background-color: dodgerblue;
}

div:nth-child(3){
    flex: 5;
    background-color: dodgerblue;
}

align-self: flex-end; 子盒子沿着侧轴对齐，

order:排序

例子

    
        
        
    
    
    
    
        

            

            

                

1

                

2

                

3

                

4