3列，左右固定，中心填充剩余空间

Question

我意识到这个问题已被问过十亿次，但是所接受的解决方案似乎都没有用，所以我要再试一次。

如何使用CSS，我有3列填充浏览器窗口，左侧是右侧固定为200px，中间区域填充剩余空间？

这很容易用表格完成，但我还没有找到一个与div和css一起使用的方法。

Answer 1

您可以使用flex-box轻松完成此操作：

＆＃13;

＆＃13;

.container {
  display: flex;
  flex-direction: row
}

.border {
  width: 200px;
  background-color: blue;
}

.main {
  flex: 1;
}

＆＃13;

<div class="container">
  <div class="border">Border</div>
  <div class="main">Center</div>
  <div class="border">Border</div>
</div>

＆＃13;

＆＃13;

＆＃13;