div+flex移动端布局

移动端布局

1.我们要进行移动端页面的开发设计第一肯定想到的是弹性盒子
2.弹性盒子flex
3.div和flex的配合使用

移动端页面

1.移动端需要引入一个样式，meta
随便打开一个网站F12调成手机模式，复制meta
2.弹性盒子
一个div设置了display: flex; 就成了一个弹性盒子
因此我们把移动端界面布局称为div+flex布局

flex水平和垂直对齐方式

    
    
    
    
    


    

        
1
        
2
        
3
        
4
    

inline-flex行内弹性盒子

    
    
    
    
    


    
inline-flex用法和flex一样
    
        行内弹性盒子
    

flex-grow剩余空间分配方式

1.平均分配

    
    
    
    
    


    

        
1
        
2
        
3
    

2.某一个子元素占据全部剩余空间

    
    
    
    
    


    

        
1
        
2
        
3
    

3.按需求分配

    
    
    
    
    


    

        
1
        
2
        
3
    

flex-direction盒子排列方向

    
    
    
    
    


    

        
1
        
2
        
3
    

盒子换行设置

    
    
    
    
    



    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
        
10
        
11
        
12
        
13
        
14
        
15
        
16
        
17
        
18
        
19
        
20