html - 左流体 div，中心拉伸(stretch)到最大宽度 div，右流体 div

Question

我有以下情况:

<div class="container">
   <div class="left"></div>
   <div class="center"></div>
   <div class="right"></div>
</div>

我需要将三个潜水(左、中、右)排成一排。左右 div 必须占据中心 div 之后剩下的所有空白空间(左边 50% 的空白空间，右边 50% 的空白空间)。中心 div 必须拉伸(stretch)到最大值，但它必须具有 max-width:1000px。因此，例如，如果屏幕宽度 <1000，则中心 div 必须占据所有空间。所以，center div 可能的宽度是从 0 到 1000px。没有js怎么办？

Answer 1

使用 flexbox 和 center div 能够shr​​ink 仅从 1000px 的 flex-basis。

这确保了 center 将拉伸(stretch)到最大 1000px

下面的片段:

.container {
  display: flex;
}
.container > div {
  height: 100px;
  border: 1px solid black;
}
.left,
.right {
  flex: 1;
}
.center{
  flex: 0 1 1000px;
}

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>