3列，左右固定，中心填充剩余空间[重复]

Question

我知道这个问题已经被问了十亿次，但似乎没有一个公认的解决方案有效，所以我要再试一次。

如何使用 CSS 让我有 3 列填充浏览器窗口，左侧和右侧固定为 200 像素，中间一列填充剩余空间？

这很容易用表格完成，但我还没有找到适用于 div 和 css 的方法。

Answer 1

你可以使用 flex-box 轻松做到这一点：

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

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

.main {
  flex: 1;
}

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