css三列布局--两边固定中间自适应和中间固定两边自适应

三列布局
本篇讲三列布局，面试常考题，自己总结的，如有什么问题，欢迎指出！我会用红色标注出主要作用部分，都是最精简的写法，，没有多余的修饰。

布局方式一:两边固定中间自适应
1.flex布局
思路：将父元素box设为display:flex;可将box设置为弹性盒模型进行布局（如果对flex不了解，可点击打开链接学习）

    
        
        
        
    
    
        

            
left
            
center
            
right
        
    

2.利用浮动（float）
让左右元素浮动，缺点是中间元素必须置于二者之后，不然right元素会进入下一行

  
  
      
          
          
          
      
      
        
        
left
        
right
        
center
        
      
  

3.利用绝对定位（position）
center居中并利用margin为左右两边留出位置，左右绝对定位

    
        
        
        
    
    
        

            
left
            
center
            
right
        
    

4.对中间的宽度进行calc计算
三个元素都向左浮动，左右定宽，中间的对其进行计算，让100%宽度减去左右宽度，即为中间宽度。

    
        
        
        
    
    
        

        
left
            
center
            
right
        
    

5.双飞翼布局（重点来了）
目的：为了优先显示中间主要部分，浏览器渲染引擎在构建和渲染渲染树是异步的（谁先构建好谁先显示），故在编写时，先构建中间main部分，但由于布局原因，将left置于center左边，故而出现了双飞翼布局。

    
        
        
        
    
    
        

            

                
 #main 
            
            
#left
            
#right
        
    

这种布局的好处是：两边（left和right）不会盖住中间(center)部分，left和right盖住的是wrap元素的两边，即main-wrap的margin部分。

6.圣杯布局（也是重点）
优先渲染主要部分,此部分参考了木羽zwwill

    
        
        
        
    
    
        

            
main
            
left
            
right
        
    

圣杯布局的缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线放大时，「圣杯」将会「破碎」掉。如图，当main部分的宽小于left部分时就会发生布局混乱。

圣杯布局和双飞翼的区别：（按我自己理解）

圣杯布局是整体使用了一个container（上例的wrapper），将三列放入其中，left和right占据的是wrapper的padding-left和 padding-right(上例第八行padding:0 100px;)。

双飞翼布局是在center部分多加了一个节点元素，left和right部分的位置在main-wrap的margin（magin-left和margin-right）部分。

    
 #main 

布局方式二:两边自适应中间固定
1.css3布局
目前没有浏览器支持 box-flex 属性。Firefox 支持替代的 -moz-box-flex 属性。Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。

box-flex 属性规定框的子元素是否可伸缩其尺寸。提示：可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间。

    
        
        
        
    
    
        

            
left
            
center
            
right
        
    

2.flex布局

    
        
        
        
    
    
        

            
left
            
center
            
right
        
    

利用flex-grow进行布局，详见flex-grow属性

3.左右利用calc()函数计算

    
        
        
        
    
    
        

            
left
            
center
            
right
        
    

两边自适应中间固定暂时整理到这三种方法。

---

作者：DOM曼珠沙华
来源：CSDN
原文：https://blog.csdn.net/a18792627168/article/details/79686746
版权声明：本文为博主原创文章，转载请附上博文链接！