Drcus | 王亚振

Drcus | 王亚振

随便写,记录点东西

css三列布局 中间固定宽 两侧等宽占满

发布于:  

想实现一个中间固定宽, 两边等比占满剩余空间

全部代码在此, 是使用flex布局完成的。 没想到其他比较好的方法。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
  <style>
    body{ border: 1px solid red; }
    *{ padding: 0; margin: 0; }
   
    .flex{ display: flex; }
    
    .left, .right {      
      background-color: green;
      flex-basis: 50%;            
      flex-grow:1;
      height: 400px;
      overflow: auto;
    }
    .center {
      width: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>

  <div class="flex">
    <div class="left">左边</div>
    <div class="center" style="align-items:center; display: flex">
      <div class>
        align-items:center
        按钮
      </div>
    </div>
    <div class="right">右边</div>
  </div>
  
</body>
</html>

预览在此

厚颜一下 ~^_^~

赏赐