如何实现三栏布局，两端固定，中间自适应

在平常的工作中，我们经常会遇到这样的需求，就是两端固定，中间自适应的三栏布局，比如移动端头部导航，那么该怎么实现呢，我总结了一下几种方式：

方式一：浮动

    样式代码：

    布局代码：

    

    

    

      
我是中间自适应布局
    
  

注意：center要放到最后

方式二：绝对定位

    样式代码：

    布局代码：

 

    

    

      
我是中间自适应布局
    
    

  

方式三：flex布局

    样式代码：

    布局代码：

 

    

    

      
我是中间自适应布局
    
    

  

这也是我在移动端最喜欢的布局

方式四：被无情抛弃的table布局

    样式代码：

    布局代码：

    

    

      
我是中间自适应布局
    
    

  

方式五：grid网格布局

    样式代码：

    布局代码：

    

    

      
我是中间自适应布局
    
    

  

以上就是我总结的几种方式，希望和大家多多交流，感谢指正！