Flex布局—固定定位+流式布局—主轴对齐—侧轴对齐—伸缩比

一.PC端和移动端的不同

PC端网页和移动端网页的有什么不同？
PC屏幕大，网页固定版心
手机屏幕小，网页宽度多数为100%

   视口标签
    
    

二.固定定位+流式布局

固定定位+流式或百分比布局写法 宽度百分比，高度固定。

代码块



    
    
    
    
    


    

        

            

                
            
            

                
            
            

                
            
            

                
            
            

                
            
        
    

三.Flex布局

1.基础

目标：能够使用Flex布局模型灵活、快速的开发网页
Flex布局/弹性布局：
①是一种浏览器提倡的布局模型，性能高
②布局网页更简单、灵活
③避免浮动脱标的问题

2.Flex主轴对齐方式

3.Flex侧轴对齐方式

4.伸缩比

属性
flex : 值;
取值分类：数值(整数)
注意: 只占用父盒子剩余尺寸

    
    
    
    
    


    

        
1
        
2
        
3
    

5.更改主轴方向

目标：使用flex-direction改变元素排列方向

    
    
    
    
    



            

                媒体
            
 

6.弹性盒子换行

问题：flex会造成弹性效果，不会推到下一行，会自动压缩宽度，就会破坏原有图形块的边框宽度。
目标：使用flex-wrap实现弹性盒子多行排列效果

    
    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8