FLEX实现两侧边栏固定中间自适应布局

最新推荐文章于 2023-03-15 10:52:23 发布

wyd1022

最新推荐文章于 2023-03-15 10:52:23 发布

阅读量2.1k

点赞数

分类专栏： css

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

 
      <style type= 
      "text/css" 
      > 
     
      #outer{ 
     
      display: flex; 
     
      width: 100%; 
     
      flex-flow: row nowrap; 
     
      } 
     
      .left,.right{ 
     
      width:200px; 
     
      height:50px; 
     
      background: red; 
     
      } 
     
      .middle{ 
     
      flex-grow: 1;           
      //决定如何分配剩余空间 
     
      background: yellow; 
     
      } 
     
      </style> 
     
      <body> 
     
      <div id= 
      "outer" 
      > 
     
      <div  
      class 
      = 
      "left" 
      >left</div> 
     
      <div  
      class 
      = 
      "middle" 
      >middle</div> 
     
      <div  
      class 
      = 
      "right" 
      >right</div> 
     
      </div>