css - 响应式设计，两侧有两个固定大小的 div，中间有一个用于其余部分的 div

Question

我有一个包含如下三个元素的标题:

#container {
  width: 100%;
}
#container div {
  display: inline-block;
  text-align: center;
}
#container #left,
#container #right {
  width: 50px;
}

<div id="container">
  <div id="left">L</div>
  <div id="center">CENTER</div>
  <div id="right">R</div>
</div>

我想要的是让它具有响应性，以便它覆盖整个窗口的宽度，但是侧面 div(左侧和右侧)需要保持相同的大小，因此唯一需要更改大小的是中心一。我如何在 CSS 中实现这一点？

Answer 1

例如

#container {
  display: flex;
}
#container div {
  display: inline-block;
  text-align: center;
  flex: 1 1;
}
#container #left,
#container #right {
  flex: 0 0 50px;
  background-color: rgba(0,0,0,.1);
}

<div id="container">
  <div id="left">L</div>
  <div id="center">CENTER</div>
  <div id="right">R</div>
</div>