flex布局知识总结

1、flex布局原理

2、flex布局父项常见属性

2.1 flex-directon设置主轴方向

 div{
 	 /* 给父集添加flex属性 */
	 display: flex;
     width: 800px;
     height: 300px;
     background-color: pink;
     /* 默认的主轴是x轴 行row 那么y轴就是侧轴喽 */
     /* 我们的元素是跟前辈主轴来排列的 */
     /* flex-direction: row;  */
     /* 简单了解 翻转 */
     /* flex-direction: row-reverse; */
     /* 我们可以把我们的主轴设置为y轴 那么x轴就变成了侧轴 */
     flex-direction: column;
}

2.2 justify-content设置主轴上子元素排列方向

div{
     /* 给父集添加flex属性 */
     display: flex;
     width: 800px;
     height: 300px;
     background-color: pink;
     /* 默认的主轴是x轴 row */
     flex-direction: row;
     /* justify-content: 设置主轴上子元素的排列方式; */
     /* justify-content: flex-start; */
     /* justify-content: flex-end; */
     /* 让子元素局中对齐 */
     justify-content: center;
     /* 平分剩余空间，有左右边距 */
     /* justify-content: space-around;*/
     /* 两边贴边,在分配剩余空间 */
     justify-content: space-between; 
 }

2.2 flex-wrap设置子元素是否换行

div{
   /* 给父集添加flex属性 */
   display: flex;
   width: 800px;
   height: 300px;
   background-color: pink;
   /* flex布局中,默认的子元素是不换行的,如果装不开，会缩小子元素的宽度,放到父元素里面 */
  /*flex-wrap: nowrap;*/
   flex-wrap: wrap;
}

2.3 align-items设置侧轴上子元素排列方向

说白了就是侧轴相对于主轴的变化。

div{
	/* 给父集添加flex属性 */
    display: flex;
    width: 800px;
    height: 300px;
    background-color: pink;
    /* 默认的主轴是x轴 行row */
    justify-content: center;
    /* 我们需要一个侧轴局中 */
    align-items: center;
    /* align-items: flex-start;
    align-items: flex-end; */
    /* 拉伸，但是子盒子不要给高度 */
    align-items: stretch;
}

2.4 align-content设置侧轴上子元素排列方向(多行)

div{
 	/* 给父集添加flex属性 */
    display: flex;
    width: 800px;
    height: 500px;
    background-color: pink;
    /* 换行 */
    flex-wrap: wrap;
    /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用align-content */
    /* 内容都在上面 */
    /* align-content: flex-start; */  
    /* 内容都在下面 */
    /* align-content: flex-end; */
    /* 内容都局中 */
    /* align-content: center; */
    /* 内容上下局中 */
    /* align-content: space-around; */
    /* 高度平分父元素 */
    align-content: stretch;
}

2.5 flex-flow是flex-direction与flex-wrap属性的复合属性

div{
 	/* 给父集添加flex属性 */
    display: flex;
    width: 800px;
    height:300px;
    background-color: pink;
    /* flex-direction: row;
    flex-wrap: wrap; */
    /* 是 flex-direction  与  flex-wrap 的合体 */
    flex-flow: row  wrap;
}

3、flex 布局子项常见属性

3.1 flex属性

	
    

        

        

        

    
    

        1
        2
        3
    

3.2 align-self控制子项自己在侧轴上的排列方式

	
    

        1
        2
        3
    

3.3 order属性定义项目的排列顺序

	
    

        1
        2
        3
    

4 案例

4.1 背影渐变色

div{
    width: 600px;
    height: 600px;
    /* 背景渐变必须添加浏览器私有前缀 */
    /* 从左上解开始  */
    background: -webkit-linear-gradient(left,red,blue);
    /* 对角线 
        top 上
        left 左
        表示 从左上角开始
    */
    background: -webkit-linear-gradient(top left,red,blue);
}

4.2 常见flex布局思路

4.3 案例代码

    
    
    
    
    


    
    

        
搜索:目的地/酒店/景点/航班号
        我 的
    
    
    

        
    
    
    

        

            
                
                景点.玩乐
            
        
        

            
                
                景点.玩乐
            
        
        

            
                
                景点.玩乐
            
        
        

            
                
                景点.玩乐
            
        
        

            
                
                景点.玩乐
            
        
    
    
    

        
        

            

                海外酒店
            
            

                海外酒店
                特价酒店
            
            

                海外酒店
                特价酒店
            
        
        
        

            

                海外酒店
            
            

                海外酒店
                特价酒店
            
            

                海外酒店
                特价酒店
            
        
        
        

            

                海外酒店
            
            

                海外酒店
                特价酒店
            
            

                海外酒店
                特价酒店
            
        
    
    
    

        
        

            
                
                电话费
            
        
        

            
                
                电话费
            
        
        

            
                
                电话费
            
        
        

            
                
                电话费
            
        
        

            
                
                电话费
            
        
        

            
                
                电话费
            
        
        

            
                
                电话费
            
        
        

            
                
                电话费
            
        
        

            
                
                电话费
            
        
        

            
                
                电话费
            
        
    
    
    

        

            
热门活动
            获取更多福利
        
        

            

                
                    
                
                
                    
                
            
            

                
                    
                
                
                    
                
            
        
    

注：参考bilili视频 https://www.bilibili.com/video/BV1N54y1i7dG?p=26&vd_source=f9f1b2be9cb64a025839e49063d67b0c